解决 Cypress 在 IE 浏览器中无法运行的问题

Cypress 是一个现代的、著名的前端测试工具。它非常流行、易于使用，能够方便地进行交互式 UI 测试。但是，它在 IE 浏览器中无法运行，这给前端开发人员带来了很大的麻烦，因为 IE 浏览器仍然是许多企业和机构访问主要网站的浏览器之一。 本文将介绍如何解决 Cypress 在 IE 浏览器中无法运行的问题。

问题原因

Cypress 的核心是使用了浏览器自带的 web driver 接口。但是，IE浏览器的 web driver 接口与其他浏览器不同，所以 Cypress 现在不支持 IE 浏览器。

解决方案

现在有两种方式解决 Cypress 在 IE 浏览器中无法运行的问题：

方案一：使用别的测试工具

Cypress 不支持 IE 浏览器，但是其他测试工具却可能支持。如果你确实需要在 IE 浏览器上进行集成测试，那么你可以考虑使用 Selenium。

Selenium 是一个开源的自动化测试工具，它支持多个浏览器包括 IE 浏览器，也可以使用各种编程语言开发测试用例。此外，Selenium 已经发展了很长时间，有庞大的社区支持，所以你可以很容易地找到教程和文档。

方案二：使用 Cyrpress IE 11 插件

如果你仍然想使用 Cypress 进行测试，那么你可以使用 Cypress IE 11 插件（cypress-plugin-ie11）。

Cypress IE 11 插件是一个由社区开发的官方计划插件，它对 Cypress 进行了修改，以便支持 IE 浏览器。安装 Cypress IE 11 插件的方法如下：

1. 在 Cypress 项目中安装 Cypress IE 11 插件

   npm install -D cypress-plugin-ie11

2. 打开 Cypress 配置文件 cypress.json ，并添加以下代码：

   // www.javascriptcn.com code example
   {
     "chromeWebSecurity": false,
     "pluginsFile": false,
     "viewportWidth": 1920,
     "viewportHeight": 1080,
     "viewportOrientation": "landscape",
     "modifyObstructiveCode": false,
     "IE11": {
       "browserLoadTimeout": 0,
       "waitForNavigationByPolling": true
     }
   }

3. 运行 Cypress 测试

   npx cypress run --browser ie11

在 Cypress IE 11 插件中，我们使用了 IE 浏览器的 web driver 接口（ InternetExplorerDriver ），使得 Cypress 可以控制 IE 浏览器。此外，插件还对 Cypress 进行了调整，以应对 IE 浏览器的一些特殊情况，例如关闭页面时的异常或关闭浏览器时的错误。

示例代码

以下示例代码演示了如何在 Cypress IE 11 插件中使用 Cypress 进行测试：

// www.javascriptcn.com code example
describe('Example site', () => {
  beforeEach(() => {
    // 设置测试视口
    cy.viewport('iphone-8')

    // 加载被测试网站
    cy.visit('/')

    // 在 IE 11 中运行测试
    if (Cypress.browser.name === 'ie') {
      cy.wait(1000)
    }
  })

  it('has a title', () => {
    cy.title().should('include', 'Example Site')
  })

  it('can navigate to the about page', () => {
    cy.contains('About').click()
    cy.url().should('include', '/about')
  })
})

总结

通过本文，我们学习了如何解决 Cypress 在 IE 浏览器中无法运行的问题。我们介绍了两种解决方案：使用别的测试工具或使用 Cypress IE 11 插件。如果您需要在 IE 浏览器上进行测试，那么这些方案将使您的工作更加便捷。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64a430ba48841e989409ecd7