使用 cypress 访问 iframe 中的元素时出错答案

【问题标题】：Error accessing element within iframe using cypress使用 cypress 访问 iframe 中的元素时出错
【发布时间】：2020-01-13 07:58:11
【问题描述】：

我对 cypress/javascript/jquery 还很陌生，非常感谢一些帮助！我正在尝试一种方法来使用此处建议的柏树访问 iframe 中的元素：https://github.com/cypress-io/cypress/issues/136#issuecomment-525994895。我的 .its 命令出现 cypress 错误，而 getInDocument 自定义命令出现后续错误。

这是被测html代码的摘录：

<iframe id="iframeDiag" style="width:100%;height:100%;border:none;padding:0px;z-index:1001;" src="https://<snip>">
#document
<snip>
<button _ngcontent-c11="" class="btn btn-md pointer btn-primary" type="button">Next</button>
<snip>
</iframe>

这是柏树代码：

cy.get("#iframeDiag")
  .iframeLoaded()
  .its('document')
  .getInDocument('button:contains(Next)')
  .trigger('click')

.get 成功。 .its 有这个错误：

cypress_runner.js:126133 Uncaught TypeError: Cannot convert object to primitive value
at baseToString (cypress_runner.js:126133)
at toString (cypress_runner.js:134455)
at Function.trim (cypress_runner.js:136853)
at cypress_runner.js:157797
at cypress_runner.js:126802
at baseForOwn (cypress_runner.js:124887)
at cypress_runner.js:126771
at Function.forEach (cypress_runner.js:131239)
at Object._logValues (cypress_runner.js:157794)
at Object.logFormatted (cypress_runner.js:157783)
at EventEmitter. (cypress_runner.js:157457)
at EventEmitter.emit (cypress_runner.js:121451)
at EventEmitter. (cypress_runner.js:101916)
at EventEmitter.emit (cypress_runner.js:121451)
at Object.emit (cypress_runner.js:101958)
at Object. (cypress_runner.js:100786)

我应该关注 TypeError 吗？从表面上看，这似乎是一个 cypress 错误，但我意识到它可能是正在测试的应用程序代码。

或者可以忽略它，而我应该专注于 .getInDocument 命令中的选择器？

任何帮助将不胜感激！谢谢！

【问题讨论】：

标签： jquery iframe cypress

【解决方案1】：

嗯，实际上，我认为有效的方法并没有。如果有人可能会发现问题，则尝试进行。我不能把这个方法的创始人归功于我，因为我不记得我是从哪里得到它的（掉进了兔子洞！）：

it ('Checking Accessibility', () => {
    // inject axe into iframes
    cy.window()
    .then((win) => {
        var iframe = win.document.getElementsByTagName('iframe')[0];
        console.log('Inject axe into iframe '+iframe.id);
        var script = iframe.contentWindow.document.createElement("script");
        script.src = '../js/axe.min.js';
        script.type = 'text/javascript';
        iframe.contentWindow.document.body.appendChild(script);
        //wait(6000);
        const axe = require('axe-core');
        return win.axe.run(iframe, { iframes: true} );
    })
    .then(({ violations }) => {
        if (violations.length) {
            cy.wrap(violations, { log: false }).each(v => {
                Cypress.log({
                    name: 'a11y error!',
                    consoleProps: () => v,
                    message: `${v.id} on ${v.nodes.length} Node${
                        v.nodes.length === 1 ? '' : 's'
                        }`
                })  
            })
        }
      return cy.wrap(violations, { log: false })
    })
    .then(violations => {
        assert.equal(
            violations.length,
            0,
            `${violations.length} accessibility violation${
            violations.length === 1 ? '' : 's'
            } ${violations.length === 1 ? 'was' : 'were'} detected`
        )
    })
});

我确实遇到了可访问性违规，因此 ax 正在工作，但 iframe 内没有任何内容（并且 iframe 内的违规确实存在）。

【讨论】：