使用Nightwatch访问iFrame元素

时间:2015-12-16 16:05:26

标签: javascript css dom iframe nightwatch.js

我正在使用Nightwatch来测试iframe中div的正确值。

我的HTML;

<div class="o-ads__inner" id="leaderboard-gpt">
  <div id="google_ads_iframe">
    <iframe id="some_id">
      #document
        <html>
          <head></head>
          <body>
            <div id="ad-data" creative-id="53134803289">
              <!-- All of the stuff -->
            </div>
          </body>
        </html>
    </iframe>
  </div>
  <iframe><!-- Another iframe (I don't want) --></iframe>
</div>

这是我的夜班测试;

module.exports = {
  'Leaderboard Visibility' : function (client) {
    client
    .url(some_url)
    .waitForElementVisible('body', 5000)
    .waitForElementPresent('#leaderboard > iframe', 10000)
    .pause(5000)
    .frame(0)
      .pause(5000)
      .waitForElementPresent('div#ad-data', 5000)
      .assert.attributeContains('div#ad-data', 'creative-id', '53134803289')
    .end();
  }
};

我从Nightwatch得到的错误是Timed out while waiting for element <div#ad-data> to be present for 5000 milliseconds.我知道 在那里通过检查失败的行之前。

我已经输入了2 .pause(5000),因为类似的问题表明,iframe中的内容加载速度不够快可能会出现问题。由于我已经完成了一些调试,我认为这不是这种情况,但我暂时将它们留在那里。

我认为我无法访问div#ad-data,因为iframe拥有自己的contentDocument属性,其中包含head&amp; body(以及随后的div)。

如何使用Nightwatch在iframe的div内声明contentDocument的属性值?

2 个答案:

答案 0 :(得分:7)

为您的第一个iframe <iframe id="some_id">使用.frame('some_id')

答案 1 :(得分:2)

动态ID外部iframe访问

这里有一种方法来测试解决这个问题,获取属性id并在框架中使用它,frame(0)不提供访问权限,nightwatch需要iframe id。对于动态生成的id,这是你可以做的。

module.exports = {
      'Checkout Braintree' : function (client) {
        client
        .url('#enter_your_url_here')
        .waitForElementPresent('[data-e2e="brainTree3Ds"]', 10000)
        .pause(5000)
        .perform(() => {
          client.getAttribute('[data-e2e="brainTree3Ds"] iframe', 'id',(result) => {
            client
              .frame(result.value)
              .setValue('input[name="external.field.password"]', 1234)
              .click('input[type="submit"]');
          });
        })
        .testSuccessPage() // External Command
        .end();
    }