web-dev-qa-db-ja.com

分度器：テストAngular Iframeでのアプリ

ここに興味深い設定があります。

Iframe内に別のAngularアプリをロードするAngularアプリがあります。 iframed-in AngularアプリをProtractorでテストすることに興味があります。

分度器は最初のAngularアプリが読み込まれるのを待っていますが、iframeを

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

Protractorがアサーションを作成する前にiframed Angularアプリを待機していないことがわかります。追加してみました

ptor.waitForAngular();

運が悪かったのでiframeに切り替えた後。誰かがここで何が起こっているのか考えがありますか？

ありがとう！

それが役立つ場合は、ChromeのSaucelabssshトンネルを介してテストを実行しています。 iframedアプリのリソースが要求され、ダウンロードされているのを確認できるため、トンネリングが機能していることがわかります。

angularjsseleniumprotractorangularjs-e2e
16
Josh Minzner

分度器でiframeをテストするのは少し注意が必要です。何が起こっているのかを理解するのに、しばらく時間がかかり、多くの忍耐が必要でした。これがお役に立てば幸いです。

ProtratorはWebdriverJSに基づいて構築されているため、パッケージ全体を使用してiframeをテストできます。分度器でテストを開始するとき、最初に行うことは分度器のインスタンスを取得することです。

var ptor = protractor.getInstance();

ただし、iframe内にあるものをテストするには、ptorではなくptor.driverが必要になります。

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

  });

});
22
Ithilon

分度器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();
19
stevejpurves

最新の分度器APIドキュメント5.4.1によると、iframeへの切り替えは非常に簡単です。

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

コンテキストが指定されたiframeに切り替わり、実行するすべてのコマンドがiframeで実行されます。ネストされたiframeに切り替えることもできます。親iframeに戻すには：

 driver.switchTo().parentFrame();
1
Bilal Alam