量角器：在 iframe 中测试 Angular 应用程序

Question

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

我有一个 Angular 应用程序，它在 iframe 中加载另一个 Angular 应用程序。我有兴趣使用 Protractor 测试 iframed-in Angular 应用程序。

Protractor 正在等待第一个 Angular 应用程序加载，但是当我切换 iframe 时

ptor.switchTo().frame('experience');

我可以看到 Protractor 在做出断言之前没有等待 iframed Angular 应用程序。我已经尝试添加

ptor.waitForAngular();

切换到 iframe 后没有运气。有人知道这里发生了什么吗？

谢谢！

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

Answer 1

使用量角器测试 iframe 有点棘手。我花了一段时间和很大的耐心才弄明白发生了什么。我希望这会有所帮助！

Protrator 是基于 WebdriverJS 构建的，因此您可以使用整个包来测试 iframe。当您开始使用量角器进行测试时，您要做的第一件事就是获取量角器的实例：

var ptor = protractor.getInstance();

但要测试 iframe 中的内容，您需要 ptor.driver 而不是 ptor！

var driver = ptor.driver;

然后，当您开始编写测试时，您会找到 iframe，然后切换到它，使用“驱动程序”对其进行测试，然后切换回初始框架。

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

  });

});

Answer 2

对于量角器 2.5.1，@lthilon 的回答是给出“无效定位器”错误。

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

    var driver = browser.driver;
    var loc = by.tagName('iframe');
    var el = driver.findElement(loc);
    browser.switchTo().frame(el);

    driver.findElement(by.tagName('body')).sendKeys('my test string');

    browser.switchTo().defaultContent();
    browser.waitForAngular();

Answer 3

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

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

上下文切换到指定的 iframe，现在您运行的每个命令都将在 iframe 上执行。现在您甚至可以切换到嵌套 iframe。切换回父 iframe：

 driver.switchTo().parentFrame();