自动化 End-End 测试 Nightwatch.js 之踩雷笔记：iframe

<iframe>

<iframe> 是在 HTML 用来内嵌另外一个 HTML 网页的，例如 SurveyCake 就有这样的功能

<iframe id="surveycake" width="100%" height="600px" src="https://surveycake.com/s/?????"
    style="border:#ddd 1px solid;" allowTransparency="true" frameborder="0"></iframe>

而在使用 Nightwatch 测试网站时，遇到 iframe 是不能直接读取 iframe 里面的文字的。
会出现像这样的错误：

"element could not be located" (5544ms)

这是因为 Nigthwatch 或应该说 WebDrive 抓取的是 current browsing context
因此属於 iframe 当中的文字是抓取不到的

frame()

Nightwatch 有提供 .frame() 这个 API 可以使用，参数可以带 ID 或数字，从 0 开始

举例而言：

browser.frame(0)
browser.frame('surveycake')

退出 frame 只要使用 .frame(null) 或 .frameParent() 即可。

需要注意的点

如果 frame 是动态载入的，使用 frame ID 则不一定抓取得到。而 frame 的 number 也不是由上而下来决定 0, 1, 2, ... 的。

因此，使用前最好还是试一下正确的 frame number，而动态载入抓取不到的部分，则可以利用 .getAttribute() 取得 src 在新分页进行检查。

browser.getAttribute('section iframe', 'src', function(result) {
  .verify.containsText('[aria-label="intro"]', 'intro');
}