【问题标题】：Elements not found after switching to iframe context in TestCafe在 TestCafe 中切换到 iframe 上下文后找不到元素
【发布时间】：2019-02-21 13:04:00
【问题描述】：

原问题：

使用

browser.switchToFrame(iframeEl);

我可以切换到特定的 iframe 窗口，这没关系 - 单击元素等可以工作。

但是，无论出于何种原因，当iframe 是当前上下文时使用Selector 不起作用。我怀疑这是因为switchToFrame 是浏览器实例上的一个方法，而我正在使用以这种方式导入的Selector 函数：

import { Selector } from 'testcafe';

我的问题是 - 如果我想使用 testcafe 在 iframe 中选择一个特定元素（例如读取其 HTML 属性） - 我应该如何处理它？我错过了什么吗？

来自 GitHub 线程的更多详细信息：

更多细节：我正在创建一个带有远程src 的iframe，然后我向那个iframe 注入了一些HTML、CSS 和JavaScript。我 100% 确定 iframe 将具有与我请求的选择器匹配的 DOM 元素 - 但仍然出现错误：Cannot obtain information about the node because the specified selector does not match any node in the DOM tree.

我的代码大致如下：

const iframeEl = await Selector('a-iframe_inner[name="something"]');
    if (await iframeEl.count === 0) {
      await this.fBrowser.switchToMainWindow();
    } else {
      await this.fBrowser.switchToIframe(iframeEl);
    }

const something = await Selector('.something');

在与await Selector 的一行代码中断。在我的其他测试中，我也在访问 iframe 并使用 await browser.click(someOtherThing); 单击某些元素，它可以完美运行。我还可以轻松读取 iframe 的控制台状态。

我怀疑iframe 元素的内容可能还没有准备好，但我想知道如何才能等到它准备好？我尝试为Selector 调用设置timeout 选项，但它没有改变任何东西。你能分享任何关于如何在切换到 iframe 上下文后延迟获取选择器的提示吗？

解决方案：

原来这确实是我的一个错误。对不起。对于未来的一代：Iframe 切换和使用选择器应该可以正常工作，至少在 TestCafe v0.20.1 中。只需确保您的选择器匹配并且您确实处于 iframe 上下文中，而不仅仅是认为您在那里

【问题讨论】：

标签： testing iframe automated-tests e2e-testing testcafe

【解决方案1】：

没有必要做任何特别的事情来使Selectors 在 iframe 中工作。它应该按预期工作。如果他们不希望使用此form 在官方存储库中创建错误报告，如果您提供一个演示该问题的示例，我将不胜感激。至于您的问题，我无法在一个简单的示例中重现此问题。测试页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>Click me</h1>

<iframe id="frame" src="http://example.com" style="width: 500px; height: 500px;"></iframe>

</body>
</html>

测试代码：

import { Selector } from 'testcafe';

fixture `Selector in iframe`
    .page `../pages/index.html`;

const selector = Selector('h1');

test('test', async t => {
    await t.click(selector);

    console.log(await selector.innerText);

    await t.switchToIframe('#frame');

    await t.click(selector);

    console.log(await selector.innerText);
});

所有点击都按预期工作，我能够成功获得innerText 的Selector。此外，我建议您检查页面上真正存在的元素，Selector 指的是现有元素，并且该元素的宽度和高度大于零。

【讨论】：

感谢您的回答！当您一直在回复时，我在 TestCafe 存储库中创建了一个问题，对我的案例进行了更明确的描述。我会相应地更新问题。同时，长话短说 - 有没有办法以某种方式延迟 Selctor 以确保它可用？ timeout 选择器的选项在我的情况下不起作用，我想知道为什么以及是否还有其他选项要等到它出现。我 100% 确定它存在于 iframe 在某些时候 问题链接：github.com/DevExpress/testcafe/issues/3478
timeout 选项或--selector-timeout 命令行选项也应该可以工作。让我们继续在github线程中讨论。
原来这确实是我的一个错误。对不起。对于未来的一代：Iframe 切换和使用选择器应该可以正常工作，至少在 TestCafe v0.20.1