使用 Nightwatch 访问 iFrame 元素

Question

我正在使用 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)s，因为类似的问题表明 iframe 中的内容加载速度不够快可能是个问题。我不认为这里是这种情况，因为我已经进行了一些调试，但我暂时将它们留在那里。

我想我无法访问 div#ad-data，因为 iframe 有它自己的 contentDocument 属性，其中包含 head 和 body（以及随后的 divs）。

如何使用 Nightwatch 在 iframe 的 contentDocument 中声明 div 的属性的值？

Answer 1

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

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

使用 Nightwatch 访问 iFrame 元素

Accessing iFrame elements using Nightwatch

javascript

css

iframe

dom

nightwatch.js

动态 id 外部 iframe 访问