量角器:在Iframe中测试Angular App

时间:2013-12-06 14:09:10

标签: angularjs selenium protractor angularjs-e2e

我在这里有一个有趣的设置。

我有一个角色应用程序,可以在iframe中加载另一个Angular App。我有兴趣用Protractor测试iframed-in Angular应用程序。

量角器正在等待加载第一个Angular应用程序,但是当我用

切换iframe时
ptor.switchTo().frame('experience');

我可以看到Protractor在进行断言之前并没有等待iframed Angular应用程序。我试过添加

ptor.waitForAngular();

切换到没有运气的iframe后。任何人都有任何想法在这里发生了什么?

谢谢!

如果有帮助,我正在通过Chrome上的Saucelabs ssh隧道运行我的测试。我可以说隧道工作正常,因为我看到iframed应用程序的资源被请求和下载。

3 个答案:

答案 0 :(得分:22)

使用量角器测试iframe有点棘手。我花了一段时间和很多耐心来理解发生了什么。我希望这有帮助!

Protrator是基于WebdriverJS构建的,因此您可以使用整个包来测试iframe。当您开始使用量角器进行测试时,首先要做的是获得量角器的实例:

var ptor = protractor.getInstance();

但要测试你在iframe中的内容,你需要ptor.driver而不是ptor!

var driver = ptor.driver;

然后,当你开始编写测试时,你找到iframe,你切换到它,你用'driver'测试它,然后切换回初始帧。

ptor.switchTo().frame(driver.findElement(protractor.By.xpath('xpath-to-iframe')));

// Test iframe with driver
driver.findElement(protractor.By.xpath('some-sort-of-input')).sendKeys('username');
driver.findElement(protractor.By.xpath('other-sort-of-input')).sendKeys('password');
driver.findElement(protractor.By.xpath('other-sort-of-button')).click();

// Switch back to Default Content
ptor.switchTo().defaultContent();

// And WAIT for angular!!
ptor.waitForAngular();

以下代码是我上面提到的一般例子:

describe('Protractor iframe Test', function(){

  var ptor, driver;

  beforeEach(function(){
    ptor = protractor.getInstance();
    driver = ptor.driver;
  });

  it('should test the iframe', function(){

    ptor.switchTo().frame(driver.findElement(protractor.By.xpath('xpath-to-iframe')));

    // Test iframe with driver
    driver.findElement(protractor.By.xpath('some-sort-of-input')).sendKeys('username');
    driver.findElement(protractor.By.xpath('other-sort-of-input')).sendKeys('password');
    driver.findElement(protractor.By.xpath('other-sort-of-button')).click();

    // At this point, you can expect() things to happen to the iframe app

    // Switch back to Default Content
    ptor.switchTo().defaultContent();

    // And WAIT for angular!!
    ptor.waitForAngular();

    // Then you can keep testing (or expecting something!)
    expect('this answer').toBe('useful');

  });

});

答案 1 :(得分:17)

使用量角器2.5.1,@ lthilon的答案是给出了“无效定位器”错误。

以下语法解决了这个问题:

.loc-caption:before {
  content: attr(title);
  display: block;
}

答案 2 :(得分:1)

根据最新的量角器API文档5.4.1,切换到iframe非常简单:

await browser.switchTo().frame(element(by.xpath('//iframe')).getWebElement());

上下文切换到指定的iframe,现在您运行的每个命令都将在iframe上执行。现在,您甚至可以切换到嵌套的iframe。要切换回父iframe,请执行以下操作:

 driver.switchTo().parentFrame();