量角器:在 iframe 中测试 Angular 应用程序 [英] Protractor: Testing Angular App in an Iframe

问题描述

我这里有一个有趣的设置.

I've got an interesting setup here.

我有一个 Angular 应用程序，它在 iframe 中加载另一个 Angular 应用程序.我有兴趣使用 Protractor 测试内置于 iframe 的 Angular 应用.

I have an Angular App that loads another Angular App inside an iframe. I'm interested in testing the iframed-in Angular app with Protractor.

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

Protractor is waiting for the first Angular app to load, but when I switch the iframe with

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

我可以看到 Protractor 在断言之前没有等待 iframe Angular 应用程序.我试过添加

I can see that Protractor is not waiting for the iframed Angular app before making assertions. I have tried adding

ptor.waitForAngular();

在没有运气的情况下切换到 iframe 之后.有人知道这里发生了什么吗?

After switching to the iframe with no luck. Anybody have any ideas what is going on here?

谢谢！

如果有帮助，我将通过 Chrome 上的 Saucelas ssh 隧道运行我的测试.我可以判断隧道正在工作，因为我看到 iframe 应用的资源正在被请求和下载.

If it helps, I'm running my tests through the Saucelabs ssh tunnel on Chrome. I can tell that the tunneling is working because I see the resources for the iframed app being requested and downloading.

推荐答案

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

Testing iframes with protractor is a little bit tricky. It took me a while and a lot of patience to sort of understand what was going on. I hope this helps!

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

Protrator is built upon WebdriverJS, so you can use the whole package to test iframes. When you start testing with protractor, the first thing you do is get an instance of protractor:

var ptor = protractor.getInstance();

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

But to test what you have inside the iframe you will need ptor.driver instead of ptor!

var driver = ptor.driver;

然后，当您开始编写测试时，您会找到 iframe，然后切换到它，使用驱动程序"对其进行测试，然后切换回初始帧.

Then, when you start writing the test, you find the iframe, you switch to it, you test it with 'driver' and you switch back to the initial frame.

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

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

The code that follows is a general example of what I mentioned above:

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

  });

});

这篇关于量角器:在 iframe 中测试 Angular 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！