在TestCafe中切换到iframe上下文后找不到元素

时间:2019-02-21 13:04:00

标签: iframe automated-tests e2e-testing testcafe

原始问题:

使用

browser.switchToFrame(iframeEl);

我可以切换到特定的iframe窗口,没关系-单击元素等即可。

但是,无论出于何种原因,在Selector是当前上下文的情况下使用iframe都不起作用。我怀疑这是因为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元素的内容可能尚未准备好,但是我想知道如何才能等到准备好为止?我尝试将timeout设置为Selector调用,但没有任何改变。您能否分享有关切换到iframe上下文后如何延迟获取选择器的任何提示?

解决方案:

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

1 个答案:

答案 0 :(得分:4)

为了使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引用现有元素,并且元素的宽度和高度大于零。