带 KnockoutJS 的量角器

Question

我的目标是在一个 knockoutJS 页面上执行 e2e 测试（页面上根本没有 AngularJS）。我开始使用量角器进行此测试。通过browser.ignoreSynchronization=true 和大量使用promise，规范似乎以正确的顺序执行，但似乎没有找到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 页面，但您必须管理 自己的测试时间（量角器的一个关键特性）。
• 我尝试了一些在测试前将 ignoreSynchronization 设置为 true 的代码，并且 然后回到假之后，但没有给出我的结果 寻找（或者我误解了策略）。
• 我之前能够运行测试，但由于异步 量角器的性质，测试与对量角器的更改不同步 页面，因此测试无关紧要。

期待你的建议。

Answer 1

只是您需要使用beforeEach() 和it() 块才能将promise 放在Protractor/WebDriverJS Control Flow 和jasmine 上以发现您的测试：

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);
  });

  // ...
}); 

---

有些人主张使用 Jasmine 而不是 Protractor 来进行我正在尝试的事情（KnockoutJS 页面上的 e2e 测试）。

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

有人说 Protractor 足以测试 KnockoutJS 页面，但您必须自己管理测试的时间（Protractor 的一个关键特性）。

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