Question

我正在尝试在iframe中查找元素，但是它不起作用。

有人在iframe中使用赛普拉斯运行测试的系统吗？进入iframe并在其中工作的某种方式。

Answer 1

这在本地和通过CI对我有效。图片来源： Gleb Bahmutov iframes blog post

 export const getIframeBody = (locator) => {
  // get the iframe > document > body
  // and retry until the body element is not empty
  return cy
    .get(locator)
    .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)
}

spec file:

    let iframeStripe = 'iframe[name="stripe_checkout_app"]'
  getIframeBody(iframeStripe).find('button[type="submit"] .Button-content > span').should('have.text', `Buy me`)

Answer 2

那是正确的。赛普拉斯不支持iframe。目前尚不可能，这很简单。您可以关注（并投票）这张票：https://github.com/cypress-io/cypress/issues/136

Answer 3

这是here中提到的已知问题。您可以创建自己的自定义cypress命令来模拟iframe功能。将以下功能添加到您的cypress/support/commands.js

Cypress.Commands.add('iframe', { prevSubject: 'element' }, ($iframe, selector) => {
  Cypress.log({
    name: 'iframe',
    consoleProps() {
      return {
        iframe: $iframe,
      };
    },
  });
  return new Cypress.Promise(resolve => {
    resolve($iframe.contents().find(selector));
  });
});

然后您可以像这样使用它：

cy.get('#iframe-id')
  .iframe('body #elementToFind')
  .should('exist')

此外，由于CORS /同源政策的原因，您可能必须在chromeWebSecurity中将false设置为cypress.json（将chromeWebSecurity设置为false可以访问跨域iframe嵌入到您的应用程序中，还可以导航到任何超域而不会出现跨域错误。

这是一种解决方法，它对我本地有效，但在CI运行期间无效。

赛普拉斯-在iframe中运行测试

3 个答案: