带有 KnockoutJS 的量角器

Question

我的目标是在 knockoutJS 页面上执行 e2e 测试（页面上根本没有 AngularJS）。我开始使用 Protractor 进行此测试。使用 browser.ignoreSynchronization=true 和大量使用承诺，规范似乎以正确的顺序执行，但看起来没有找到 expect 语句。我收到一条消息 No specs found，即使我有三个 it 调用，其中包含 expect 语句。

这是我的代码：

var debug = true;

describe('check for highlighting', function() {

  var url = 'http://domain/page.aspx', 
    formLoadedField = 'NameField',
    selectId = 'Action',
    selectValue = 'Change Values Option',
    testValue = 'Some Test Value!!',
    sourceField = 'FromField',
    targetField = 'ToField',
    EC = protractor.ExpectedConditions;

  browser.ignoreSynchronization = true;

  log('load the page in the browser.  use promises to keep the flow of the tests accurate');
  browser.get(url)    
    .then( function(){
      log('wait for the form to load (check presence of specific input)');
      browser.wait(EC.presenceOf(element(by.id(formLoadedField))), 5 * 1000);

      log('change select to specific option in order to show additional content on the page');
      element( by.cssContainingText('#'+selectId+' option', selectValue)).click();    
    })

    .then( function(){
      log('wait for addtional fields to load completely');
      browser.wait( EC.presenceOf(element( by.id(targetField) )), 5 * 1000);
    })

    .then( function(){
      log('test that the additional field is present.');
      it('should have a targetField element', function() {
        expect( EC.presenceOf(element( by.id(targetField) )) ).toBe(true);
      });
    })

    .then( function(){          
      log('update the source field with the test value');
      element( by.id(sourceField) ).sendKeys( testValue );

      log('Test that the targetField has the highlight class.');
      it('targetField should be highlighted when values are different', function() {
        expect( hasClass(element( by.id(targetField) ),'highlight') ).toBe(true);
      });
    })

    .then( function(){
      log('update the target field with the test value.');
      element( by.id(targetField) ).sendKeys( testValue );

      log('Test that the targetField does not have the hightlight class.');
      it('targetField should NOT be highlighted when values are equal', function() {
        expect( hasClass(element( by.id( targetField ) ),'highlight') ).not.toBe(true);
      });
    });

}); 

function log(msg){
    if(debug){
        console.log(msg);
    }
}

我得到以下输出：

PS C:\> protractor conf.js
[09:38:08] I/hosted - Using the selenium server at http://localhost:4444/wd/hub
[09:38:08] I/launcher - Running 1 instances of WebDriver
load the page in the browser.  use promises to keep the flow of the tests accurate
Started


No specs found
Finished in 0 seconds
wait for the form to load (check presence of specific input
change select to specific option in order to show additional content on the page
wait for addtional fields to load completely
test that the additional field is present.
update the source field with the test value
Test that the targetField has the highlight class.
update the target field with the test value.
Test that the targetField does not have the hightlight class.
[09:38:13] I/launcher - 0 instance(s) of WebDriver still running
[09:38:13] I/launcher - chrome #01 passed

我的研究表明 AngularJS 提倡使用 Protractor。

有些人提倡使用 Jasmine 而不是 Protractor 来满足我的需求尝试（在 KnockoutJS 页面上进行 e2e 测试）。
有人说量角器是足以测试 KnockoutJS 页面，但您必须管理自己安排测试时间（Protractor 的一个关键特性）。
我尝试了一些在测试前将 ignoreSynchronization 设置为 true 的代码，并且然后回到 false 之后，但是那没有给出我的结果寻找（或者我误解了策略）。
我之前能够得到运行的测试，但是由于异步 Protractor 的性质，测试与对页面，因此测试无关紧要。

期待您的建议。

Answer 1

只是你需要使用 beforeEach() 和 it() 块才能将承诺放在 Protractor/WebDriverJS Control Flow 和茉莉花上以发现你的测试：

var debug = true;

describe('check for highlighting', function() {

  var url = 'http://domain/page.aspx', 
    formLoadedField = 'NameField',
    selectId = 'Action',
    selectValue = 'Change Values Option',
    testValue = 'Some Test Value!!',
    sourceField = 'FromField',
    targetField = 'ToField',
    EC = protractor.ExpectedConditions;

  beforeEach(function () {
    browser.ignoreSynchronization = true;  // TODO: move to onPrepare

    log('load the page in the browser.  use promises to keep the flow of the tests accurate');
    browser.get(url).then( function(){
      log('wait for the form to load (check presence of specific input)');
      browser.wait(EC.presenceOf(element(by.id(formLoadedField))), 5 * 1000);
      log('change select to specific option in order to show additional content on the page');
      element( by.cssContainingText('#'+selectId+' option', selectValue)).click();    
    }).then( function(){
      log('wait for addtional fields to load completely');
      browser.wait( EC.presenceOf(element( by.id(targetField) )), 5 * 1000);
    });
  });

  it('should have a targetField element', function() {
    expect( EC.presenceOf(element( by.id(targetField) )) ).toBe(true);
  });

  // ...
});

Some advocate using Jasmine instead of Protractor for what I am trying (e2e tests on KnockoutJS page).

Jasmine 和 Protractor 不是替代品。 Jasmine 只是 Protractor 可以使用（默认使用）的 testing framework。您还可以使用其他测试框架代替 Jasmine，例如 CucumberJS.

Some say that Protractor is sufficient for testing KnockoutJS pages, but that you must manage the timing of the tests yourself (a key feature of Protractor).

您可以使用 Protractor 测试任何网络应用程序。只是当用于测试 AngularJS 应用程序时，Protractor 凭借其内置的同步和特定定位器真正闪耀。但是，您可以（我什至会说应该）使用它来测试您拥有的 KnockoutJS 应用程序 - 您只需通过 browser.ignoreSynchronization = true; 关闭同步。 Protractor 仍然是 WebDriverJS 的一个非常好的包装器，并且具有方便且功能丰富的 API.

带有 KnockoutJS 的量角器

Protractor with KnockoutJS

knockout.js

protractor

e2e-testing