运行Cypress报错‘dri3 extension not supported’求解决方案及结构搭建

解决"dri3 extension not supported"错误 #

这个错误是X11环境下GPU加速相关的问题，以下是几种可行的解决方式：

• 临时禁用GPU加速启动Cypress
  启动时添加环境变量跳过GPU检测：

  CYPRESS_DISABLE_GPU=1 npx cypress open
  

  如果需要永久生效，可以在项目的package.json的scripts里添加命令：

  "scripts": {
    "cypress:open": "CYPRESS_DISABLE_GPU=1 npx cypress open"
  }
  

  之后运行npm run cypress:open即可。

• 安装dri3相关依赖（Linux环境）
  针对Debian/Ubuntu系发行版：

  sudo apt update && sudo apt install libdrm-dev mesa-utils
  

  针对CentOS/RHEL系发行版：

  sudo yum install mesa-libGL-devel
  

  安装完成后重启系统或X11会话，再尝试启动Cypress。

• 使用无头模式运行测试
  如果不需要GUI界面，直接用无头模式执行测试，避免GPU相关问题：

  npx cypress run --headless
  

搭建Cypress项目结构 #

1. 初始化项目（若未初始化） #

新建项目文件夹并进入，执行：

npm init -y

生成基础的package.json文件。

2. 安装Cypress #

执行以下命令将Cypress作为开发依赖安装：

npm install cypress --save-dev

3. 生成项目结构 #

执行初始化命令生成标准Cypress目录：

npx cypress init

生成的目录结构如下：

your-project/
├── cypress/
│   ├── e2e/               # 存放端到端测试文件（.cy.js/.cy.ts）
│   ├── fixtures/          # 测试数据文件（如JSON、CSV）
│   └── support/           # 全局支持文件
│       ├── commands.js    # 自定义Cypress命令
│       └── e2e.js         # 全局测试钩子、配置
├── cypress.config.js      # Cypress核心配置文件
└── package.json

4. 编写第一个测试示例 #

在cypress/e2e/目录下新建sample.cy.js，添加测试代码：

describe('Sample End-to-End Test', () => {
  it('Verifies example.com loads correctly', () => {
    cy.visit('https://example.com');
    cy.get('h1').should('contain', 'Example Domain');
  });
});

5. 运行测试 #

• GUI模式（需先解决GPU错误）：

  CYPRESS_DISABLE_GPU=1 npx cypress open
  

  在弹出的Cypress窗口中选择测试文件即可运行。
• 无头模式：

  npx cypress run
  

内容的提问来源于stack exchange，提问作者estevan426