如何使用 Cypress.io 绕过格子 iframe？

Question

我目前正在做一些自动化工作，但我在克服格子 iframe 时遇到了困难。这是我的应用程序内部的样子：

\n

\n

我的应用程序内部的设置方式如下：

\n

<div class="PaneActions PaneActions--no-padding-top"><button\n        class="TextButton TextButton--is-action TextButton--is-threads-treatment TextButton--no-margin">\n        <p class="FinePrint FinePrint--is-threads-treatment">By selecting \xe2\x80\x9cContinue\xe2\x80\x9d you agree to the <u>Plaid End User\n                Privacy Policy</u></p>\n    </button><button\n        class="Touchable-module_resetButtonOrLink__hwe7O Touchable-module_block__WBbZm Touchable-module_wide__EYer3 Button-module_button__1yqRw Button-module_large__1nbMn Button-module_centered__3BGqS"\n        id="aut-continue-button" type="button" role="button"><span class="Button-module_flex__2To5J"><span\n                class="Button-module_text__38wV0">Continue</span></span></button></div>\n

\n

我正在获取父元素和子元素，我正在查看文本和许多其他选项，但我无法测试该产品。有人以前用过格子图案吗？

\n

Answer 1

使用Plaid 演示页面作为测试应用程序，并按照在 Cypress 中使用 iframe 中的步骤进行操作，我成功地获得了一致工作的测试。

在博客中，我使用此序列来确保 iframe 主体已完全加载

iframe -> body -> should.not.be.empty

页面在等待 GET 请求完成时首先加载占位符，因此仅获取加载的 iframe 主体是不够的。

占位符

iframe -> body -> should.not.be.empty

我们需要等待“继续”按钮，这需要一些时间才能显示，所以给它一个很长的超时时间。

使用.contains('button', 'Continue', { timeout: 10000 })实际上返回了两个按钮，尽管只有一个可见。

我将按钮选择器更改为使用 ID，并且所有操作都一致。

考试

<p>iframe placeholder for https://cdn.plaid.com/link/v2/stable/link.html?isLinkInitialize=true&origin=https%3A%2F%2Fplaid.com&token=link-sandbox-170bce6a-fe90-44a4-8b8a-54064fbc8032&uniqueId=1&version=2.0.917</p>