我已经尝试了一切方法，三种浏览器（Chrome、FireFox、Edge）， 尝试使用 WebDriverIO 定位 iframe 中的对象失败。特别是为了测试它，我写了最简单的html
outer.html
<html>
<body>
<iframe id="zzz" src="zzz.html" height="150" />
</body>
</html>
zzz.html
<input id="foo" name="ccc" value="ccc" />
我的代码
await browser.url(`http://localhost:8080/.../outer.html`)
const $iframe = await browser.$('iframe#zzz');
$iframe.waitForExist({ timeout: 10000 });
console.log('iframe exists');
const documentReady = await browser.executeScript('return document.readyState;', []);
console.log('Document ready state:', documentReady);
await browser.waitUntil(
async () => (await browser.execute(() => document.readyState)) === 'complete',
{ timeout: 10000, timeoutMsg: 'iframe load fail' }
);
await browser.pause(10000);
await browser.switchToFrame($iframe);
browser.setTimeout({ 'implicit': 10000 })
console.log('switch to iframe');
let fooExist = await browser.executeScript(
'return document.getElementById("foo")!=null;', []);
console.log('found foo by browser.executeScript:', fooExist);
fooExist = await browser.execute(() => {
return document.getElementById("foo") != null;
});
console.log('found foo by browser.execute:', fooExist);
fooExist = await (await browser.$('#foo')).isExisting();
console.log("found foo by $('#foo'):", fooExist);
await browser.switchToParentFrame();
结果
[0-0] iframe exists
[0-0] Document ready state: complete
[0-0] switch to iframe
[0-0] found foo by browser.executeScript: true
[0-0] found foo by browser.execute: false
[0-0] found foo by $('#foo'): false
目前只有 browser.executeScript(..) 可以找到 foo 对象，我希望 $('#foo') 和 browser.execute(..) 也能工作。
我很抱歉这么说，但很难从你的代码中弄清楚。
您在这里做了很多操作，也许其中一些是不必要的并且会产生副作用。
不要在变量名中使用 $。 来自谷歌样式指南的常见建议。 这里更令人困惑，因为 $ 代表 webdriver-io 中的命令。
您之前错过了await
$iframe.waitForExist({ timeout: 10000 });您找到 iframe 并等待它存在，然后等待页面加载。顺序应该是相反的。
const documentReady = await browser.executeScript('return document.readyState;', []);
console.log('Document ready state:', documentReady);
await browser.waitUntil(
async () => (await browser.execute(() => document.readyState)) === 'complete',
{ timeout: 10000, timeoutMsg: 'iframe load fail' }
);
const iframe = await browser.$('iframe#zzz');
await iframe.waitForExist({ timeout: 10000 });
console.log('iframe exists');
我不明白你为什么有
browser.setTimeout({ 'implicit': 10000 })尝试分开查找 foo 并等待它存在。
const foo = await browser.$('#foo');
fooExist = await foo.isExisting();