如何使用 Cypress 在框架（不是 iframe）中选择元素？答案

【问题标题】：How do you select elements in a frame (not iframe) using Cypress? AssertionError如何使用 Cypress 在框架（不是 iframe）中选择元素？
【发布时间】：2021-07-22 01:01:43
【问题描述】：

我看过一些帖子，例如 Cypress - run test in iframe 了解如何在 Cypress 中处理 iframes。但我使用的是旧的和过时的 frames，这是遗留系统（我必须测试）使用的。

我检查了赛普拉斯推荐的Github -Cypress iframes，但没有找到普通旧框架的答案。使用 iframe 的解决方案，没有奏效。

问题与 iframe 相同，当尝试使用选择元素时

cy.get('input').type('test');

您会收到 AssertionError 声明：

Timed out retrying after 4000ms: Expected to find element: input, but never found it.

感谢任何建议。

【问题讨论】：

标签： iframe cypress frame

【解决方案1】：

我对@987654321@ 没有任何经验，但在此来源上进行了测试

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>

<head>
  <meta name="robots" content="noindex">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Example page</title>
</head>

<frameset cols="150,*">
  <frame src="example_a.html">
  <frame src="example_b.html">
  <noframes>
    <body>
      <p>Alternate content</p>
    </body>
  </noframes>
</frameset>

</html>

example_b.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
  <meta name="robots" content="noindex">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Example page</title>
</head>

<body>
  <input />
</body>

</html>

这个测试有效

cy.visit('http://127.0.0.1:5500/index.html')  // served from vscode

cy.get('frame')
  .eq(1)                                     // 2nd frame
  .then($frame => $frame[0].contentWindow)   // it's window
  .its('document.body')                      
  .within(() => {                  // sets cy.root() to 2nd frame body
    cy.get('input')
      .type('something')
      .invoke('val')
      .should('eq', 'something')
  })

如果你有更复杂的事情要做，你可以尝试访问框架的源代码，例如这会使框架内容成为顶部窗口

cy.visit('http://127.0.0.1:5500/example_b.html')

cy.get('input')
  .type('something')
  .invoke('val')
  .should('eq', 'something')

【讨论】：

【解决方案2】：

你可以试试这样的：

cy.get('#iframeSelector')
       .then(($iframe) => {
            const $body = $iframe.contents().find('body')

                cy.wrap($body)
                    .find('input')
                    .type('test')
            });

【讨论】：

@Micah 有<frame> 而不是<iframe>。