Cypress - 在 iframe 中运行测试 [英] Cypress - run test in iframe

问题描述

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

I'm trying to find elements in iframe but it doesn't work.

有没有人有一些系统可以在 iframe 中使用 Cypress 运行测试?某种进入 iframe 并在其中工作的方法.

Is there anyone who have some system to run tests with Cypress in iframe? Some way to get in iframe and work in there.

推荐答案

It's a known issue提到 此处.您可以创建自己的自定义 cypress 命令来模拟 iframe 功能.将以下函数添加到您的 cypress/support/commands.js

It's a known issue mentioned here. You can create your own custom cypress command which mocks the iframe feature. Add following function to your 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));
  });
});

然后你可以这样使用它:

Then you can use it like this:

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

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

Also, because of CORS/same-origin policy reasons, you might have to set chromeWebSecurity to false in cypress.json (Setting chromeWebSecurity to false allows you to access cross-origin iframes that are embedded in your application and also navigate to any superdomain without cross-origin errors).

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

This is a workaround though, it worked for me locally but not during CI runs.

这篇关于Cypress - 在 iframe 中运行测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！