端到端测试是一种用于测试应用程序流程是否自始至终都按照设计执行的方法。进行端到端测试的目的是识别系统依赖性并确保在各个系统组件和系统之间传递正确的信息。

E2E Testing

运行谷歌Chrome无头模式在Docker中是一个常见的需求，尤其是在进行自动化测试或网页抓取时。以下是如何在Docker中设置并运行无头Chrome的步骤：

### 1. 创建Dockerfile

首先，你需要创建一个Dockerfile来定义你的Docker镜像。这个Dockerfile将会包含安装Chrome和相应驱动的命令，还有一些必要的依赖。这里是一个简单的例子：

```Dockerfile
# 使用官方的Node.js作为基础镜像
FROM node:12-slim

# 设置工作目录
WORKDIR /app

# 安装Chrome
RUN apt-get update && apt-get install -y wget gnupg2
RUN wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
RUN apt-get install -y ./google-chrome-stable_current_amd64.deb

# 拷贝应用文件到容器内
COPY . /app

# 安装应用依赖
RUN npm install

# 启动应用
CMD ["node", "your-app.js"]
```

这个Dockerfile首先基于Node.js镜像，适用于需要Node.js环境的应用。它会下载并安装Chrome浏览器。确保你的应用的其余部分也被正确设置好。

### 2. 构建Docker镜像

创建完Dockerfile后，你可以使用以下命令来构建镜像：

```bash
docker build -t your-image-name .
```

### 3. 运行Docker容器

最后，你可以通过以下命令来运行你的Docker容器，这里使用了无头模式启动Chrome：

```bash
docker run -d --name your-container-name your-image-name node your-app.js
```

在你的Node.js应用中，你可以使用Puppeteer（一个Node库，它提供了高级API来控制Chrome或Chromium）来以无头模式启动Chrome：

```javascript
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: true, // 启动无头模式
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();
```

### 结论

这样就可以在Docker容器中运行Google Chrome无头模式了。这种设置非常适合自动化测试和网页抓取任务，因为它可以在隔离的环境中运行，而不受外部因素影响。


如何在 docker 中运行谷歌 chrome 无头浏览器？

当使用Cypress进行端到端测试时，处理身份验证是一个常见的任务。在某些情况下，应用程序可能会使用localStorage来存储令牌（token），用于维护用户的登录状态。在Cypress中设置localStorage可以在测试开始前模拟用户已经登录的状态，从而避开登录界面，直接测试应用程序的核心功能。

要在Cypress测试中设置localStorage，可以使用Cypress的`cy.setLocalStorage()`命令。这里有一个简单的例子展示如何在测试前设置令牌：

### 示例：

假设我们有一个应用程序，用户登录后会在localStorage中保存一个名为`auth_token`的令牌。我们需要在每个测试运行前设置这个令牌。

```javascript
describe('用户仪表板测试', () => {
  beforeEach(() => {
    // 在每次测试前设置localStorage中的令牌
    cy.setLocalStorage('auth_token', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c');
    
    // 确保在继续之前localStorage中的值已经设置好
    cy.getLocalStorage('auth_token').should('eq', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c');
    
    // 访问用户的仪表板页面
    cy.visit('/dashboard');
  });

  it('应该显示用户的专属数据', () => {
    cy.contains('您的数据').should('be.visible');
  });
});
```

在上述代码中，`beforeEach` 钩子函数确保在每个测试开始前，`auth_token` 都被设置在localStorage中。这样，当测试访问需要认证的页面（如用户仪表板）时，应用程序将识别这个令牌，并允许测试继续进行，无需手动登录。

这种方法提高了测试的效率和速度，因为它跳过了登录过程，直接进行主要功能的测试。此外，这还可以帮助我们在不同的测试用例中重用相同的登录状态，使得测试脚本更简洁、更易维护。

在 Cypress 中，测试前如何在 localStorage 中设置一个令牌

在Cypress中检查一个元素的多个CSS类是一种常见的测试需求，可以通过几种方法来实现。下面我会详细解释我通常如何操作，以及提供具体的代码示例。

### 方法1：使用`.should()`和`have.class`

这是最直接的方法。如果您想要检查元素是否具有特定的CSS类，可以使用Cypress的`.should()`命令结合`have.class`断言。

```javascript
// 假设我们要检查的元素应该同时具有`active`和`enabled`两个类
cy.get('.my-element') // 获取目标元素
  .should('have.class', 'active')
  .should('have.class', 'enabled');
```

这种方法很直观，也容易理解。如果元素缺少任何一个类，测试将不会通过。

### 方法2：使用`.invoke()`和JavaScript的`classList`属性

如果你想一次性检查多个类，或者处理的类名较多，你也可以使用`.invoke()`命令来获取元素的类列表，然后使用JavaScript的`include`函数来检查这些类是否都存在。

```javascript
cy.get('.my-element') // 获取目标元素
  .invoke('attr', 'class') // 获取class属性
  .should('include', 'active') // 检查是否包含active类
  .should('include', 'enabled'); // 检查是否包含enabled类
```

### 方法3：自定义断言

如果你发现自己经常需要检查多个类，或者想要简化你的测试代码，你可以编写一个自定义的断言来完成这项工作。

```javascript
// 添加一个新的断言来检查多个类
Cypress.Commands.add('haveClasses', (selector, classes) => {
  const classList = classes.split(' ');
  cy.get(selector).then($el => {
    const actualClasses = $el[0].className.split(' ');
    expect(actualClasses).to.include.members(classList);
  });
});

// 使用这个新的命令
cy.haveClasses('.my-element', 'active enabled');
```

这种方式让代码更加模块化和可重用，尤其是在有很多此类检查的大型项目中。

### 示例

假设我们正在测试一个网页，用户点击一个按钮后，一个消息框 (`div`) 会获取到`active` 和 `enabled`两个类。我们可以使用以上任一方法来确保当按钮被点击后，这个`div`确实获取了正确的类：

```javascript
// 模拟用户点击
cy.get('.toggle-button').click();

// 检查div是否有正确的类
cy.get('.message-box')
  .should('have.class', 'active')
  .should('have.class', 'enabled');
```

这样，我们就能确保我们的应用程序在用户交互后能够表现出预期的行为。使用Cypress进行这样的检查有助于提高我们应用的可靠性和用户体验。

E2E Testing相关问题

如何在 docker 中运行谷歌 chrome 无头浏览器？

在 Cypress 中，测试前如何在 localStorage 中设置一个令牌

如何在 Cypress 中检查一个元素的多个 CSS 类？