无法在框架内的柏树中选择项目答案

【问题标题】：Unable to select item in cypress inside a frame无法在框架内的柏树中选择项目
【发布时间】：2021-12-22 18:26:49
【问题描述】：

我已成功登录实验室结果系统，但我无法继续前进。我的长期意图是获取实验室结果，以便在本地纳入医疗记录。

const getIframeBody = () => {
  // get the iframe > document > body
  // and retry until the body element is not empty
  return cy
  .get('frame[id="EclairMainFrame"]')
  .its('0.contentDocument.body').should('not.be.empty')
  // wraps "body" DOM element to allow
  // chaining more Cypress commands, like ".find(...)"
  // https://on.cypress.io/wrap
  .then(cy.wrap)
}

describe('Medlab Test', () => {
    it('Visits Eclair', () => {
      cy.visit('https://cdr.medlabcentral.co.nz/Eclair/mvc')
      cy.get('.login-field').eq(0).type('userid')
      cy.get('.login-field').eq(1).type('passphrase{enter}')
      cy.location('pathname').should('eq', '/Eclair/ClinicalWorkstation.aspx')
      getIframeBody().find('.search-form-form-textbox') 
    })
  })

这让我登录，但赛普拉斯未能找到输入患者 ID 的输入字段。我看到以下错误消息：

6000 毫秒后重试超时：应找到元素： .search-form-form-textbox，但从未找到它。从元素查询：

此时该输入字段的 DOM 显示：

<input class="search-form-form-textbox Mandatory" id="PatAliasId" name="PatAliasId" type="text" value="" tabindex="4">

我已经在 cy.get('.search-form-form-textbox') 类、id cy.get('#PatAliasId') 和类属性 cy.get('name=["PatAliasId"]') 上尝试了 cy.get，但所有这些尝试都在 6 秒后超时。

在框架内查找 dom 元素的正确语法是什么？

【问题讨论】：

您可以在 Patient ID 字段上方发布完整的 DOM 吗？是Shadow DOM中的字段吗？它在 iFrame 中吗？
是的，它在一个框架中。来源在这里gist.github.com/gchiu/5116e4def0a76c3ed62b5c93d78f7a8a
您的要点不包括 iframe 标记。
对不起，我离开家后才知道。当我回到家时。
好的，更新了要点，希望现在所有信息都在那里。谢谢

标签： javascript cypress

【解决方案1】：

要在 Cypress 中使用框架，您必须使用以下命令安装 cypress 插件，然后您可以与框架内的元素进行交互

npm install -D cypress-iframe

参考网址 Cypress Frames

如果你已经完成了上述操作，那么首先加载框架以找到所需的元素

cy.frameLoaded(#frameId)
cy.iframe.find('#PatAliasId').type('abc')

【讨论】：

我收到一个断言错误：6000 毫秒后重试超时：应找到元素：iframe，但从未找到。

【解决方案2】：

在之前的 cypress 版本中，不支持 iFrame。但在最新版本中，cypress 提供了对 iFrames 的支持。

在 cypress 上工作，我们需要使用以下命令安装 cypress-iframe。

npm install -D cypress-iframe

使用下面的代码：

describe('Medlab Test', () => {
    it('Visits Eclair', () => {
      cy.visit('https://cdr.medlabcentral.co.nz/Eclair/mvc')
      cy.frameLoaded('#frameId')
      cy.iframe.find('#PatAliasId').type('Enter Your Input')
    })
  })

【讨论】：

与其他答案相同的错误。您的答案中的语法也是错误的。