Question

基本上，我想检查iframe中是否存在该元素。我正在使用cypress-iframe包来访问iframe中的元素。我搜索了很多，但找不到任何有效答案。所有的答案都是关于赛普拉斯本身的，但是在iframe上，解决方案无法正常工作。如果该按钮存在于我要单击的iframe中的示例。如果不存在，我想继续其他步骤。

我得到的错误是柏树找不到元素。我尝试使用get函数，它是相同的。 cypress尝试查找该元素并给出错误，因为找不到。但是我想知道是否存在，然后采取行动。

cy.enter('.my-iframe').then(frameBody => {
  // This is not working
  if(frameBody().find(".my-button").length > 0){
    frameBody().find(".my-button").click();
  }  
});

<iframe class="my-iframe" src="content.html" style="height:200px;width:300px"></iframe>

Answer 1

找到了解决方案。似乎这是使用cypress检查iframe中是否存在元素的唯一方法。

使用此解决方案，我们可以检查元素是否不存在，然后可以采取其他措施，或者仅继续进行下一步而不会出现任何错误。

cy.get(".my-iframe").then($frame => {
  const content = $frame.contents();
  if(content.find('.my-button').length){
    content.find('.my-button').click();
  }
});

Answer 2

从赛普拉斯文档中：（Cypress）

const getIframeDocument = () => {
  return cy
  .get('iframe[data-cy="the-frame"]')
  // Cypress yields jQuery element, which has the real
  // DOM element under property "0".
  // From the real DOM iframe element we can get
  // the "document" element, it is stored in "contentDocument" property
  // Cypress "its" command can access deep properties using dot notation
  // https://on.cypress.io/its
  .its('0.contentDocument').should('exist')
}

const getIframeBody = () => {
  // get the document
  return getIframeDocument()
  // automatically retries until body is loaded
  .its('body').should('not.be.undefined')
  // wraps "body" DOM element to allow
  // chaining more Cypress commands, like ".find(...)"
  .then(cy.wrap)
}

it('gets the post', () => {
  cy.visit('index.html')
  getIframeBody().find('#run-button').should('have.text', 'Try it').click()
  getIframeBody().find('#result').should('include.text', '"delectus aut autem"')
})

赛普拉斯：检查iframe中是否存在元素

2 个答案: