Cypress 是一个前端自动化测试工具，用于测试基于Web的应用程序。它能够测试运行在浏览器中的应用，并且适用于单元测试、集成测试和端到端（E2E）测试。Cypress 提供了一个丰富的API集，以及一个友好的交互式界面，让开发和测试人员能够轻松编写、运行和调试测试用例。

Cypress

在Cypress中检查元素是否具有多个CSS类是一种常见的测试需求，可以通过多种方式实现。以下是一些方法和示例，说明如何在Cypress测试中执行此操作：

### 方法1：直接使用`.should('have.class', 'className')`

这种方法是最直接的，你可以通过链式调用`have.class`来检查元素是否具有多个类。例如，如果你想检查一个元素同时具有`active`和`highlight`这两个类，你可以这样编写测试代码：

```javascript
cy.get('.my-element').should('have.class', 'active').and('have.class', 'highlight');
```

这行代码首先会获取类名为`my-element`的元素，然后检查它是否同时具有`active`和`highlight`这两个类。

### 方法2：使用正则表达式

如果要检查的类很多，使用多次`.should('have.class', ...)`可能会让代码显得冗长。这时，可以使用正则表达式来简化这一过程。例如：

```javascript
cy.get('.my-element').should('have.attr', 'class').and('match', /^(?=.*\bactive\b)(?=.*\bhighlight\b).*$/);
```

这里，`have.attr`用来获取元素的`class`属性，`match`则用正则表达式来验证这个属性中是否同时包含`active`和`highlight`。这种方法在类名很多时可以使代码更加整洁。

### 方法3：使用数组和每个类进行迭代

如果你希望代码更具可读性，也可以创建一个包含所有必需类的数组，然后迭代这个数组来检查每个类：

```javascript
const classes = ['active', 'highlight', 'visible'];

classes.forEach(cls => {
  cy.get('.my-element').should('have.class', cls);
});
```

这种方法的好处是，增加或删除类名时，只需更新数组即可，而不必修改多处测试代码。

### 示例

假设我们有一个网页，其中包含一个按钮，当点击后会添加`active`和`highlight`类。我们的Cypress测试可能会是这样的：

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

// 检查按钮是否正确地获得了相关类
cy.get('.my-button').should('have.class', 'active').and('have.class', 'highlight');
```

通过这样的测试，我们可以确保按钮在被点击后具有正确的类，从而验证了按钮的交互功能是否按预期工作。

总结来说，检查元素是否具有多个CSS类在Cypress中是非常灵活的，可以根据测试的具体需求和个人编码风格选择最合适的方法。

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

在 Cypress 中，比较数组可以通过多种方式完成，具体取决于你要比较的内容和你的具体需求。以下是一些常用的方法和示例：

### 1. 使用 `.should()` 断言进行简单比较

如果你只需要验证数组的长度或者检查数组是否包含某个特定的元素，可以使用 `.should()` 断言来完成。

**示例：**
```javascript
// 假设有一个获取书籍标题的函数，返回一个数组
cy.getBookTitles().should('have.length', 3);
cy.getBookTitles().should('include', 'JavaScript权威指南');
```

### 2. 使用 `.then()` 和 JavaScript 原生方法

当需要进行更复杂的数组比较时，比如比较两个数组是否相等，可以使用 `.then()` 方法来处理 JavaScript 数组，并使用原生的比较方法。

**示例：**
```javascript
cy.getBookTitles().then((titles) => {
  expect(titles).to.deep.equal(['JavaScript权威指南', '你不知道的JavaScript', 'ES6 标准入门']);
});
```

### 3. 使用 Chai 的深度比较

Cypress 内置了 Chai 断言库，可以利用 Chai 的 `deep` 标志来对数组进行深度比较，这在比较数组元素顺序和内容都相同时非常有用。

**示例：**
```javascript
cy.getBookTitles().should('deep.equal', ['JavaScript权威指南', '你不知道的JavaScript', 'ES6 标准入门']);
```

### 4. 使用第三方库如 lodash

如果 Cypress 和 Chai 提供的方法不能满足需求，我们还可以使用例如 lodash 这样的第三方库来帮助比较。

**示例：**
```javascript
const _ = require('lodash');
cy.getBookTitles().then((titles) => {
  const expectedTitles = ['JavaScript权威指南', '你不知道的JavaScript', 'ES6 标准入门'];
  assert.isTrue(_.isEqual(titles, expectedTitles), '书籍列表正确');
});
```

### 小结
在 Cypress 中比较数组，主要是利用 Cypress 的断言方法和 JavaScript 的数组处理方法。根据需要比较的数组的复杂度，可以选择合适的方法来实现比较功能。这些方法包括使用 Cypress 的内置断言如 `.should()`，JavaScript 的比较方法，或者第三方库如 lodash。每种方法都有其适用场景，选择合适的方法可以有效地提高测试的准确性和效率。

Cypress 如何比较数组？

在 Cypress 中处理并行的 XHR 请求，我们通常会利用 Cypress 的 `cy.intercept()` 方法来监听网络请求，并使用 `cy.wait()` 方法来等待这些请求完成。以下是详细的步骤和一个例子：

### 步骤

1. **定义请求**: 使用 `cy.intercept()` 来定义我们想要监听的请求。我们可以通过方法、URL 等属性来指定具体的请求。

2. **别名赋值**: 给这些监听的请求分别设定别名，这样我们可以在后续的测试中引用它们。

3. **触发请求**: 执行可能会触发这些请求的操作，比如点击按钮、提交表单等。

4. **等待请求完成**: 使用 `cy.wait()` 与之前设定的别名来等待一个或多个请求完成。

### 示例

假设我们有一个页面，在这个页面上，用户点击一个按钮后会并行触发两个XHR请求：一个是获取用户信息，另一个是获取用户的订单详情。

```javascript
describe('并行XHR请求测试', () => {
  it('应当正确等待两个并行的XHR请求', () => {
    // 监听第一个XHR请求
    cy.intercept('GET', '/api/users/*').as('getUser');
    // 监听第二个XHR请求
    cy.intercept('GET', '/api/orders/*').as('getOrders');

    // 触发XHR请求
    cy.visit('/some-page');
    cy.get('#load-data').click(); // 假设这个按钮触发上述请求

    // 等待两个请求都完成
    cy.wait(['@getUser', '@getOrders']);

    // 在请求完成后进行断言
    cy.get('@getUser').its('response.statusCode').should('eq', 200);
    cy.get('@getOrders').its('response.statusCode').should('eq', 200);
  });
});
```

在这个例子中，我们首先设置了两个 `intercept` 来分别监听 `/api/users/*` 和 `/api/orders/*` 的 GET 请求，并且给这两个请求分别设置了别名 `getUser` 和 `getOrders`。当点击按钮后，我们使用 `cy.wait()` 来等待这两个请求都完成。最后，我们还可以从 `cy.get()` 中获取这些请求的详细信息，并进行断言，以确保请求的执行符合预期。

通过这种方式，我们可以有效地管理和测试页面中并行发生的多个网络请求，确保它们都正确响应，并且符合我们的测试预期。

如何在 Cypress 中等待两个并行的 XHR 请求

在Cypress中，等待某个元素消失可以通过多种方式来实现。最常用的方法是利用`.should()`断言连同`not.exist`或者`not.be.visible`，来等待元素从DOM中消失或不再可见。以下是几种方法的示例：

### 使用 `should('not.exist')`

如果你希望等待一个元素从DOM中彻底消失，你可以这样做：

```javascript
cy.get('.some-element').should('not.exist');
```

这会告诉Cypress一直等待，直到页面上不再存在带有`.some-element`类的元素。

### 使用 `should('not.be.visible')`

如果元素仍然存在于DOM中，但你希望它不可见（例如，通过CSS隐藏），可以使用：

```javascript
cy.get('.some-element').should('not.be.visible');
```

这会告诉Cypress等待，直到`.some-element`不再对用户可见。

### 使用 `wait` 结合 `should`

在某些情况下，如果后端操作需要时间，并且这个操作会导致元素消失，你可能需要结合使用`wait`和`should`命令：

```javascript
cy.wait('@yourApiCall');
cy.get('.some-element').should('not.exist');
```

这个例子中，`cy.wait('@yourApiCall')`会等待一个别名为`yourApiCall`的API调用完成。完成后，Cypress会继续等待`.some-element`元素消失。

### 注意事项

- 确保你的选择器是具体且唯一的。如果选择器不唯一（例如，页面上有多个相同的元素），Cypress可能会找到其他的元素，而不是你想要它等待消失的那个。

- 如果你的应用使用动画，那么可能需要增加一个超时时长，因为元素的消失可能不是立即发生的：

  ```javascript
  cy.get('.animated-element').should('not.be.visible', { timeout: 10000 });
  ```

  这会增加Cypress等待元素不可见的超时时长至10秒。

通过这些方法，你可以告诉Cypress等待一个元素消失，这是在自动化测试中常见的一个需求，特别是在测试具有异步行为的Web应用时。

Cypress 如何等待某个元素消失？

在Cypress中等待某个元素消失，我们通常会用到`.should('not.exist')`断言。这将会让Cypress重试断言直到它通过为止，即直到元素不再存在于DOM中。这是一个非常实用的特性，尤其是当进行异步操作，例如等待一个加载指示器消失之后再进行下一步操作。

例如，假设您有一个加载指示器，它在异步操作期间在页面上显示，操作完成后消失。加载指示器的HTML元素可能是这样的：

```html
<div id="loading-indicator">Loading...</div>
```

当您想要在测试中等待这个加载指示器消失时，可以这样编写Cypress代码：

```javascript
// 等待加载指示器消失
cy.get('#loading-indicator').should('not.exist');
```

这段代码会获取ID为`loading-indicator`的元素，并断言它应该不存在。Cypress会不断尝试这个断言，直到默认的超时时间（通常是4秒，但是可以通过配置进行修改）结束，如果在这段时间内元素消失了，测试就会继续进行。如果元素没有在超时时间内消失，测试将会失败。

此外，如果需要等待某个元素不可见（即它仍然存在于DOM中，但是不再是可见状态），可以使用`.should('not.be.visible')`断言。

例如，如果加载指示器变成了不可见状态，但没有从DOM中移除，可以这样做：

```javascript
// 等待加载指示器不可见
cy.get('#loading-indicator').should('not.be.visible');
```

这两种方法允许你在Cypress测试中处理元素消失的情况，确保在断言和操作之间有适当的同步。

IMHO the cleanest way is not to use waits nor timeouts with get, this is kinda an antipattern.

I would recommend to use [Cypress waitUntil](https://www.npmjs.com/package/cypress-wait-until) command and use something like:

     cy.waitUntil(function() {
      return cy.get('element').should('not.exist');
     })
    

or depending on the app code you can use `not.be.visible`.

`cypress-wait-until` did not work for me. I just used the basic:

    cy.get('.ant-drawer-body').should('not.exist');
    

It waits automatically.

If you specifically need to wait, you could use the [`wait()`](https://docs.cypress.io/api/commands/wait.html) function of cypress before making an assertion, and provide the amount of time to wait before timeout.

But note, this is an anti-pattern as you can find in the docs:

> You almost never need to wait for an arbitrary period of time. There are always better ways to express this in Cypress.

That said, if your loading indicator is bound to some network request, you can wait for them to finish before making an assertion. This could be achieved with something like [this](https://docs.cypress.io/api/commands/wait.html#Alias) example:

    // Wait for the route aliased as 'getAccount' to respond
    // without changing or stubbing its response
    cy.server()
    cy.route('/accounts/*').as('getAccount')
    cy.visit('/accounts/123')
    cy.wait('@getAccount').then((xhr) => {
      // we can now access the low level xhr
      // that contains the request body,
      // response body, status, etc
    })
    

More info about waiting for requests could be found [here](https://docs.cypress.io/guides/guides/network-requests.html#Waiting).

Also, make sure that you really want to use `.should('not.exist')` and not `.should('not.be.visible')`.

Loading spinner implementations often just hide the element rather than removing it from the DOM. Hence, `should("not.exist")` won't work for them.

`cy.get("element").should("not.be.visible")` is the right approach in such cases (as [Diogo's answer](https://stackoverflow.com/questions/53672387/how-to-wait-for-element-to-disappear-in-cypress#answer-53673043) already hinted).

`.findByTestId('loading-spinner-data-testid').should('not.be.visible')`

This works in a similar context for me.

As of `"@testing-library/cypress": "^5.3.1",`

Just make sure you give your spinner component a data-testid attribute.

`<LoadingSpinner data-testid='loading-spinner-data-testid'>`

在 Cypress 中，可以通过多种方式访问 `baseURL` 的值。`baseURL` 是在 Cypress 的配置文件中指定的，通常用来表示应用的根地址，这样就可以在测试中仅仅使用相对路径。以下是访问 `baseURL` 的几种方法：

1. **通过 `cy.visit()` 使用相对路径**:
   当您在 `cy.visit()` 使用相对路径时，Cypress 会自动将 `baseURL` 作为前缀添加到路径中。例如，如果您设置了 `baseURL` 为 `https://example.com`，您可以这样使用：

   ```javascript
   cy.visit('/page'); // 实际访问的 URL 将是 https://example.com/page
   ```

2. **通过 Cypress 配置命令**:
   您可以使用 `Cypress.config()` 函数访问当前的配置，包括 `baseURL`。例如：

   ```javascript
   const baseURL = Cypress.config('baseUrl');
   console.log(baseURL); // 输出配置文件中设置的 baseURL
   ```

3. **在测试中动态设置**:
   如果你需要在测试执行过程中动态地更改 `baseURL`，你也可以使用 `Cypress.config()` 方法：

   ```javascript
   Cypress.config('baseUrl', 'https://newexample.com');
   // 之后的 cy.visit('/') 会访问 https://newexample.com/
   ```

4. **环境变量**:
   还可以通过设置环境变量的方式来覆盖配置文件中的 `baseURL`。在命令行中运行 Cypress 时，使用 `CYPRESS_BASE_URL` 环境变量：

   ```shell
   CYPRESS_BASE_URL=https://anotherexample.com npx cypress open
   ```

   在测试中，`baseURL` 会被设置为 `https://anotherexample.com`。

作为一个实际的例子，假设我们在测试中需要访问一个登录页面，而这个页面的路径是 `/login`。我们的 `baseURL` 配置为 `https://example.com`，我们可以编写以下的 Cypress 测试代码：

```javascript
describe('Login Page Test', () => {
  it('should visit the login page', () => {
    // 直接使用相对路径，Cypress 会自动使用 baseURL
    cy.visit('/login');
    
    // 做一些登录页面的断言...
  });
  
  it('should dynamically get the baseURL and construct the full URL', () => {
    // 获取 baseURL
    const baseURL = Cypress.config('baseUrl');
    
    // 使用获取的 baseURL 构造完整的 URL 并访问
    cy.visit(`${baseURL}/login`);
    
    // 做一些登录页面的断言...
  });
});
```

在第一个测试用例中，我直接使用 `cy.visit('/login')`，Cypress 自动加上了 `baseURL`。在第二个测试用例中，我首先获取 `baseURL` 的值，然后手动构造了完整的 URL 来访问登录页面。这两种方式都可以根据测试的需要选择使用。

You can use the [`Cypress.config()`](https://docs.cypress.io/api/cypress-api/config#Syntax) command.

To get `baseUrl` value use `Cypress.config().baseUrl` or `Cypress.config('baseUrl')`.

`cy.visit('/')` will visit the baseUrl if you have it defined in your Cypress e2e config. ([Source](https://docs.cypress.io/api/commands/visit#Syntax))

Cypress 如何获取 baseURL 的值？

在Cypress中，要在所有测试运行之前执行一些公共代码，我们通常使用`before`或`beforeEach`钩子。`before`钩子在测试文件中的所有测试运行之前执行一次，而`beforeEach`钩子则在每个测试用例运行之前都会执行。

这里有个示例：

如果您想在所有测试前只执行一次某些代码，您可以在测试文件的顶层使用`before`钩子：

```javascript
// 在所有测试前只执行一次
before(() => {
  // 这里可以放置你的公共代码，比如：
  // 登录操作
  cy.login('username', 'password'); // 假设你有一个封装好的登录命令
  // 设置测试数据或者环境
  cy.setupTestData();
});
```

如果需要在每个测试用例之前执行代码，可以使用`beforeEach`钩子：

```javascript
// 在每个测试用例之前都执行
beforeEach(() => {
  // 这里可以放置你的公共代码，比如：
  // 每次都要确保从登陆页面开始
  cy.visit('/login'); // 访问登录页面
  // 你可能需要清除浏览器的localStorage或cookies
  cy.clearLocalStorage();
  cy.clearCookies();
  // 每个测试用例都需要的初始化操作
  cy.initializeTestContext();
});
```

这些钩子应该放在你的测试文件顶部，通常在描述测试套件的`describe`块外面或里面。将它们放在`describe`块外面意味着它们会在该文件中定义的所有`describe`块之前运行。放在`describe`块内部，则只会影响该`describe`块中的测试用例。

另外，如果你有多个测试文件，并且希望有一些代码在这些测试文件中的每个文件执行前都运行一次，你可以使用Cypress的`support`文件夹中的`index.js`文件。在那里放置的代码会在每个测试文件执行前运行。

例如，在`cypress/support/index.js`文件中：

```javascript
// 这将在每个测试文件之前执行一次
before(() => {
  // 公共初始化代码，比如设置API服务器的状态
  cy.initializeApiServer();
});

// 这将在每个测试文件的每个测试用例之前执行
beforeEach(() => {
  // 通用的每个测试用例前的逻辑，比如登录
  cy.loginToApplication();
});
```

记得在使用这些钩子时要注意它们的作用域和执行顺序，以确保测试环境的正确设置。

**Short answer:** You can write your login command in a `before` hook within the `supportFile` ([the file that is loaded automatically before your other spec files](https://on.cypress.io/configuration#Folders-Files)). This `before` hook will run before any of the code in your other test files.

* * *

**Recommendations:** That being said, this approach leaves little flexibility for variation in your individual test files that you may want in the future like:

*   What if you want to seed the database differently for one test?
*   What if you want to log in as a different user with different permissions?
*   What if you need to do something in `onBeforeLoad` once?

I would recommend just having the login command in a `before` hook in each individual spec file.

I would also _further_ recommend having your login command in a `beforeEach` hook to [avoid sharing _any_ state in between tests](https://docs.cypress.io/guides/references/best-practices.html#Having-tests-rely-on-the-state-of-previous-tests).

Now in **Cypress v12** the appropriate way to do this is with the [Before Run API](https://docs.cypress.io/api/plugins/before-run-api).

**cypress.config.js**

    const { defineConfig } = require('cypress')
    
    module.exports = defineConfig({
      // setupNodeEvents can be defined in either
      // the e2e or component configuration
      e2e: {
        setupNodeEvents(on, config) {
          on('before:run', (details) => {
            /* code that needs to run before all specs */
          })
        },
        experimentalInteractiveRunEvents: true,   // use for cypress open mode
      },
    })

describe('Hooks', function() {
        before(function() {
            // runs once before all tests in the block
        })
    })
    

[https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests.html#Hooks](https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests.html#Hooks)

I would login before EACH test because there could be things that happen in a previous test that affects the results of the current test. With a fresh login, you're starting with a clean state every time. If you want to test a "chain" of unrelated actions (action A THEN action B), then write that as a separate test, but have basic functionality in individual tests.

    describe('/page'), () => {
      beforeEach(() => {
        cy.login()        // custom command that handles login w/o UI
        cy.visit('/page') // go to the page you are testing
      })
    
      // tests
    })
    

You should include a beforeEach block in every test file. This block should login and navigate to the page in question.

`cypress/support/e2e.ts`

    before(() => {
      // do stuff
    })
    

Use `before` to run 1-time before every test or use `beforeEach`. to run before each individual test.

如何在使用 Cypress 执行所有测试代码之前执行公共代码？

在使用Cypress进行端到端测试时，等待页面加载是一个关键环节。通常，Cypress 自动等待页面加载并执行命令，但在特定情况下，你可能需要显式的等待页面或资源加载完成。以下是几种方法：

### 1. 自动等待DOM元素

Cypress 通常会自动等待元素可见并且可以交互。例如，使用 `cy.visit()` 访问一个页面后，Cypress 会等待页面加载完成。当使用 `cy.get()` 获取DOM元素时，Cypress 会等待该元素出现在DOM中。

```javascript
cy.visit('https://example.com');
cy.get('.important-element').should('be.visible');
```

在上述代码中，Cypress 会在访问 `example.com` 后等待 `.important-element` 元素出现并且可见。

### 2. 显式等待

如果你需要等待一个特定的时间，可以使用 `cy.wait()`。

```javascript
cy.visit('https://example.com');
cy.wait(5000); // 等待5000毫秒
cy.get('.important-element').should('be.visible');
```

### 3. 等待AJAX请求

如果页面加载涉及到异步的AJAX请求，你可以使用 `cy.wait()` 等待这些请求完成。

```javascript
cy.server();
cy.route('GET', '/api/data').as('getData');
cy.visit('https://example.com');
cy.wait('@getData');
```

在上述代码中，Cypress 会等待与别名 `getData` 匹配的AJAX请求完成。

### 4. 判断页面加载状态

有时候，你可能需要判断页面是否已经完全加载。可以通过检查 `document.readyState` 属性来了解页面加载状态，例如：

```javascript
cy.window().then((win) => {
  cy.wrap(win.document.readyState).should('eq', 'complete');
});
```

### 例子

假设我正在测试一个复杂的单页面应用（SPA），页面需要从多个API加载数据。我可能会使用以下方式来确保相关的数据和元素加载完成：

```javascript
cy.visit('/dashboard');

// 假设有一个概览框架会在数据加载后显示
cy.get('.overview-panel').should('be.visible');

// 假设页面会进行多个API请求来填充数据表格
cy.server();
cy.route('GET', '/api/users').as('loadUsers');
cy.route('GET', '/api/products').as('loadProducts');
// 然后等待这些请求成功
cy.wait('@loadUsers');
cy.wait('@loadProducts');

// 最后检查表格是否填充数据
cy.get('.user-table').find('tr').should('have.length.greaterThan', 1);
cy.get('.product-table').find('tr').should('have.length.greaterThan', 1);
```

在实际的Cypress测试中，通常不需要添加过多的显式等待，因为Cypress的默认命令队列会自动处理大部分的等待。然而，在遇到复杂的异步操作时，以上提供的方法可以帮助确保你的测试脚本稳定执行，并且能够正确地等待必要的页面加载过程。

可以在测试案例代码里面添加一些断言：

```
cy.click('#someButtonToNavigateOnNewPage');

cy.location('pathname', {timeout: 60000})
  .should('include', '/newPage');

cy.click('#YouAreOnNewPage');
```

可以更改默认超时 - 默认情况下为 4000 毫秒（4 秒）,以确保用户的页面加载完成。

Cypress 如何等待页面加载完成？

Cypress 是一个前端自动化测试工具，它不直接支持传统的条件语句（如 `if`），因为它运行在异步的 JavaScript 环境中。在 Cypress 中进行条件判定通常需要依赖其提供的链式命令和断言。如果您想根据某个元素是否存在来执行不同的命令，可以使用 `.then()` 方法来访问当前命令队列的状态，并编写自己的逻辑。

以下是一个 Cypress 中根据元素存在来决定执行逻辑的例子：

```javascript
// 检查元素是否存在
cy.get('body').then($body => {
  // 如果元素存在
  if ($body.find('.my-element').length) {
    // 元素存在时执行的代码
    cy.get('.my-element').click();
  } else {
    // 元素不存在时执行的代码
    // 例如：可以选择点击另一个按钮或者记录日志等
    cy.get('.other-button').click();
  }
});
```

在这个例子中，`.then()` 方法被用来访问 DOM 并对其进行检查。我们首先尝试获取 `body` 标签，然后在 `.then()` 的回调函数中检查我们感兴趣的 `.my-element` 类的元素是否存在。通过查找 `.my-element` 类的长度，我们可以判断元素是否存在来决定执行的逻辑。如果存在，执行一些操作（例如点击它），如果不存在，可能需要执行一些其他操作（例如点击一个替代的按钮或记录一条日志等）。这样，我们就能够根据页面上元素的存在与否来控制测试流程。

Cypress 允许 jQuery 处理 DOM 元素，因此这对您有用：

    cy.get("selector_for_your_button").then($button => {
      if ($button.is(':visible')){
        //you get here only if button is visible
      }
    })
    

**更新**：您需要区分现有按钮和可见按钮。下面的代码区分了 3 种不同的场景（存在且可见、存在且不可见、不存在）。如果你想在按钮不存在的情况下通过测试，你可以这样做`assert.isOk('everything','everything is OK')`

    cy.get("body").then($body => {
        if ($body.find("selector_for_your_button").length > 0) {   
        //evaluates as true if button exists at all
            cy.get("selector_for_your_button']").then($header => {
              if ($header.is(':visible')){
                //you get here only if button EXISTS and is VISIBLE
              } else {
                //you get here only if button EXISTS but is INVISIBLE
              }
            });
        } else {
           //you get here if the button DOESN'T EXIST
           assert.isOk('everything','everything is OK');
        }
    });

您还可以使用我的插件`cypress-if`来编写条件命令链

    cy.get('...').if('visible').click()
    

阅读[https://glebbahmutov.com/blog/cypress-if/](https://glebbahmutov.com/blog/cypress-if/)

试试这个代码：

    isElementVisible(xpathLocater) {
            this.xpath(xpathLocater).should('be.visible');
    };
    
    isElementNotVisible(xpathLocater) {
            this.xpath(xpathLocater).should('not.exist');
    };
    

然后将这两种方法与 if 语句一起使用，如下所示：

    if(isElementNotVisible) {
    }
    

或者

    if(isElementVisible) {
    }

Cypress 如何在使用 if 条件时检测某个元素是否可见？

在Cypress中，要获取元素的`href`属性，你可以使用`.invoke('attr', 'attributeName')`方法，其中`attributeName`就是你想要获取的属性名，比如`href`。下面是一个简单的例子说明如何获取一个链接（anchor tag `<a>`）的`href`属性：

```javascript
// 假设有一个链接<a id="my-link" href="/some-path">Click here</a>
// 用Cypress选择这个元素然后获取href属性

cy.get('#my-link') // 选择元素
  .invoke('attr', 'href') // 获取href属性
  .then(href => {
    // 现在你可以使用href变量，它包含了链接的href属性值
    console.log(href); // 输出: /some-path
    // 做其他的断言或操作
  });
```

在这个例子中，`.get('#my-link')`命令先选中ID为`my-link`的元素，然后`.invoke('attr', 'href')`命令用于获取该元素的`href`属性值。最后，`.then()`用于得到这个属性值，并且可以在这个回调函数中对`href`进行进一步的操作或断言。

如果你需要断言这个`href`属性是否有特定的值，你可以直接用Cypress提供的`.should()`断言方法，例如：

```javascript
// 断言元素的href属性是否等于某个特定值
cy.get('#my-link').should('have.attr', 'href', '/some-path');
```

在这个断言中，`should('have.attr', 'href', '/some-path')`会检查选中的元素是否有一个`href`属性，且该属性的值为`/some-path`。如果不匹配，测试会失败。

The code below should do what you're trying to achieve. There is also an entire [recipe with suggestions on how to test links that open in new tabs](https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/testing-dom__tab-handling-links/cypress/e2e/tab_handling_anchor_links_spec.cy.js).

    it('Advertise link should refer to Contact page', () => {
       cy.get('div.footer-nav > ul > li:nth-child(2) > a')
         .should('have.attr', 'href').and('include', 'contact')
         .then((href) => {
           cy.visit(href)
         })
    })
    

I would also suggest reading through the Cypress document on the best ways to assign and work with variables: [https://on.cypress.io/variables-and-aliases](https://on.cypress.io/variables-and-aliases)

Solution 1: `invoke("attr", "href")`
------------------------------------

Navigate to the URL specified in the element's href attribute:

    cy.get(selector)
          .invoke('attr', 'href')
          .then(href => {
            cy.visit(href);
          });
    

Reference: [https://docs.cypress.io/api/commands/invoke.html#Function-with-Arguments](https://docs.cypress.io/api/commands/invoke.html#Function-with-Arguments)

* * *

Solution 2: Prevent content from opening in a new tab.
------------------------------------------------------

Remove the target attribute from the anchor element, then click on it to navigate to its URL within the same tab:

    cy.get(selector).invoke('removeAttr', 'target').click()
    

Reference: [https://docs.cypress.io/examples/examples/recipes.html#Tab-Handling-and-Links](https://docs.cypress.io/examples/examples/recipes.html#Tab-Handling-and-Links)

Cypress 如何获取元素的 ` href `属性？

`hasClass()`CSS 选择器的 or是`has()`jQuery 中的内置方法，用于检查具有指定类名的元素是否存在。然后您可以返回一个布尔值来执行断言控制。

    Cypress.Commands.add('isExistElement', selector => {
      cy.get('body').then(($el) => {
        if ($el.has(selector)) {
          return true
        } else {
          return false
        }
      })
    });
    

然后，可以用 TypeScript 文件（index.d.ts）将其制作成特殊的 cypress 方法，并且可以采用可链接的形式。

    declare namespace Cypress {
        interface Chainable {
            isExistElement(cssSelector: string): Cypress.Chainable<boolean>
        }
    }
    

如下例所示：

    shouldSeeCreateTicketTab() {  
      cy.isExistElement(homePageSelector.createTicketTab).should("be.true");
    }

使用**元素轮询**并进行检查，以免测试失败。

在最大等待时间内，要么对话框永远不会到达，要么此代码将其关闭。

    cy.get('#login-username').type('username');
    cy.get('#login-password').type(`password{enter}`);
    
    const ifElementExists = (selector, attempt = 0) => {
      if (attempt === 100) return null           // no appearance, return null
      if (Cypress.$(selector).length === 0) {
        cy.wait(100, {log:false})                // wait in small chunks
        getDialog(selector, ++attempt)           // try again
      }
      return cy.get(selector, {log:false})       // done, exit with the element
    }
    
    ifElementExists('.warning').then($el => {
      if ($el?.length) {
        $el.find('#warn-dialog-submit').click()
      }
    })

export function clickIfExist(element) {
            cy.get('body').then((body) => {
                if (body.find(element).length > 0) {
                    cy.get(element).click();
                }
            });
        }

export const getEl = name => cy.get(`[data-cy="${name}"]`)
    
    export const checkIfElementPresent = (visibleEl, text) => {
       cy.document().then((doc) => {
         if(doc.querySelectorAll(`[data-cy=${visibleEl}]`).length){
          getEl(visibleEl).should('have.text', text)
    
          return ;
       }
    getEl(visibleEl).should('not.exist')})}

Cypress 如何检查可能不存在的元素?

在 Cypress 中，如果您想在运行测试用例之前在 `localStorage` 中设置令牌（token），可以使用Cypress的`cy`命令来实现。这通常会在`beforeEach`钩子中完成，以确保在每个测试运行前设置所需的状态。以下是一个示例：

```javascript
describe('Token Setting in LocalStorage', () => {
  beforeEach(() => {
    cy.visit('/'); // 访问应用的初始页面

    // 设置localStorage中的令牌
    cy.window().then((win) => {
      win.localStorage.setItem('token', 'yourTokenValue');
    });
  });

  // 这里写上测试用例
  it('should have token set in localStorage', () => {
    // 测试localStorage中的令牌是否正确设置
    cy.window().should((win) => {
      expect(win.localStorage.getItem('token')).to.eq('yourTokenValue');
    });
  });
});
```

在这个例子中，我们首先调用 `cy.visit('/')` 来加载应用程序的页面。然后，在 `beforeEach` 钩子中，我们通过 `cy.window()` 访问浏览器窗口对象，并利用该对象的 `localStorage.setItem` 方法来设置令牌。`'yourTokenValue'` 应该替换为实际的令牌值。

之后，每个 `it` 块中的测试用例都会在一个有令牌存在于 `localStorage` 的环境中运行。在测试用例中，我们还可以使用 `expect` 语句来确认 `localStorage` 中的令牌是否正确设置，这有助于验证设置操作是否成功。

请注意，有些情况下，您可能需要等待某些异步操作完成后再设置localStorage，或者您的应用程序可能在加载时清除localStorage，这时您应该确保 `localStorage` 在应用程序的初始化逻辑执行完毕后再进行设置。这可以通过在 `cy.visit('/').then(() => { /* set localStorage here */ })` 回调中完成来确保正确的时序。

Here's an example of adding a command `cy.login()` that you can use in any Cypress test, or put in a `beforeEach` hook.

    Cypress.Commands.add('login', () => { 
      cy.request({
        method: 'POST',
        url: 'http://localhost:3000/api/users/login',
        body: {
          user: {
            email: 'jake@jake.jake',
            password: 'jakejake',
          }
        }
      })
      .then((resp) => {
        window.localStorage.setItem('jwt', resp.body.user.token)
      })
    
    })
    

Then in your test:

    beforeEach(() => {
      cy.login()
    })

As an extra, you can also use the [cypress-localstorage-commands](https://www.npmjs.com/package/cypress-localstorage-commands) package to persist localStorage between tests, so login request will be made only once:

In support/commands.js:

    import "cypress-localstorage-commands";
    
    Cypress.Commands.add('login', () => { 
      cy.request({
        method: 'POST',
        url: 'http://localhost:3000/api/users/login',
        body: {
          user: {
            email: 'jake@jake.jake',
            password: 'jakejake',
          }
        }
      })
      .its('body')
      .then(body => {
        cy.setLocalStorage("jwt", body.user.token);
      })
    });
    

Then, in your tests:

    before(() => {
      cy.login();
      cy.saveLocalStorage();
    });
    
    beforeEach(() => {
      cy.restoreLocalStorage();
    });

I've used something along the lines of bkuceras answer for a while now. Recently I've run into an issue when testing multiple roles/logins throughout tests. Basically what is happening is I log in as an admin and do one test, then I log in as a non admin and do a second test. The first test runs fine and ends (cypress clears local storage) however there are still some xhr requests running from the first test when the second test starts. These xhr requests no longer see the token which triggers my app to see a 401 unauthorized error and clear local storage (including my non admin token I have set). Now the 2nd test fails because that non admin token is not available in local storage.

Ultimately my solution was to prefetch the token before the test then set the token in the onBeforeLoad function of visit. This ensures the token is not cleared by any race condition before your visit command.

    cy.visit('/app', {
        onBeforeLoad: function (window) {
            window.localStorage.setItem('token', myToken);
        }
    })
    

Really this is a pretty unique edge case, but heres hoping it may help someone as I've spent many hours finding this solution.

If you are open for the experimental mode, I highly recommend to use the cy.session to store the token:

    Cypress.Commands.add('login', (username, password) => {
      cy.session([username, password], () => {
        cy.request({
          method: 'POST',
          url: '/login',
          body: { username, password },
        }).then(({ body }) => {
          window.localStorage.setItem('authToken', body.token)
        })
      })
    })
    

For more information, please check the official cypress documentation: [https://docs.cypress.io/api/commands/session](https://docs.cypress.io/api/commands/session)

Cypress 如何在执行测试代码之前在 localStorage 中设置令牌 token ？

在Cypress中选择某个元素内部的第n个子元素，可以使用`.children()`来获取所有子元素，然后使用`.eq(index)`来选取特定索引的子元素。索引是从0开始的，所以如果您想选择第n个子元素，您需要使用`.eq(n-1)`。这里有一个具体的例子：

假设我们有如下的HTML结构：

```html
<div class="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
</div>
```

如果你想选择这个父元素内的第二个子元素，你可以这样写Cypress测试代码：

```javascript
cy.get('.parent').children().eq(1).should('contain', 'Child 2');
```

在这个例子中：
- `.get('.parent')` 选择了类名为`parent`的元素。
- `.children()` 获取了这个父元素的所有直接子元素。
- `.eq(1)` 选择了这些子元素中的第二个（索引为1）。
- `.should('contain', 'Child 2')` 是断言，检查选中的元素是否包含文本"Child 2"。

如果您想选择第n个子元素，请确保将n减去1，然后放在`.eq()`中，因为索引是基于0的。

Update
------

As pointed out by @dpstree in the comments, this doesn't answer the original question. Please see more recent answers for a complete solution.

Original
--------

By using [eq](https://docs.cypress.io/api/commands/eq.html#Usage)

    cy.get('tbody>tr').eq(0)    // Yield first 'tr' in 'tbody'
    cy.get('ul>li').eq(4)       // Yield fifth 'li' in 'ul'

In the particular context of _selecting_ the nth `option`, this may be appropriate:

    cy.get('select[name=subject] > option')
      .eq(3)
      .then(element => cy.get('select[name=subject]').select(element.val()))

Based on solution from [Miguel Rueda](https://stackoverflow.com/users/10451645/miguel-rueda), but using `prevSubject` option:

    Cypress.Commands.add(
      'selectNth',
      { prevSubject: 'element' },
      (subject, pos) => {
        cy.wrap(subject)
          .children('option')
          .eq(pos)
          .then(e => {
            cy.wrap(subject).select(e.val())
          })
      }
    )
    

Usage:
======

    cy.get('[name=assignedTo]').selectNth(2)
    

Explanation:
============

*   Using `children('option')` and `.eq(pos)` traverse children of select to specific element.
*   Call `select` method with value of selected element.

You can now select an option by `index` within the `.select(index)` command:

    cy.get('select').select(0)        // selects by index (yields first option) ie "What is this regarding?"
    cy.get('select').select([0, 1])   // select an array of indexes
    

This should be easy now with the release of cypress [v8.5.0](https://github.com/cypress-io/cypress/releases/tag/v8.5.0). See [documentation](https://docs.cypress.io/api/commands/select#Index) for more.

I had the same problem and solved it by creating a custom cypress command. No as pretty as I would like, but it did the job.

    Cypress.Commands.add("selectNth", (select, pos) => {
      cy.get(`${select} option +option`)
        .eq(pos)
        .then( e => {
           cy.get(select)
             .select(e.val())
        })
    })
    

then I used in the test as such

        cy.viewport(375, 667)
          .selectNth("customSelector", 3)
    

The `option +option` part was the only way I could find to get the full list of options inside a select and it's currently the bit of code i'm trying to work arround although it works fine.

Cypress 如何选择某个元素中的第 n 项？

在Cypress中，要检验某个元素是否不存在，可以使用`.should('not.exist')`断言。这个断言会成功地通过，如果在DOM中找不到期望的元素。以下是一个简单的例子，展示了如何在Cypress中验证一个元素不存在：

```javascript
// 假设我们想要确保一个具有特定ID的元素不存在于页面中
cy.get('#element-to-find').should('not.exist');
```

这行代码会指示Cypress去查找具有ID `element-to-find` 的元素，并验证它确实不存在于DOM中。

在实际的测试场景中，你可能遇到需要等待某个异步操作完成后再检查元素是否存在的情况。例如，如果有一个元素是在某个动作执行后被从DOM中移除的，你可能想要使用`cy.wait()`来等待这个操作完成：

```javascript
// 假设执行某个动作后，元素会被从DOM中移除
cy.click('#remove-element-button'); // 触发移除元素的动作
cy.wait(1000); // 等待1000毫秒
cy.get('#element-to-remove').should('not.exist'); // 然后检查元素是否被移除
```

在这个例子中，我们首先触发了一个按钮点击事件，它会导致页面上的一个元素被移除。然后我们告诉Cypress等待一秒钟，以确保那个动作有足够的时间去完成移除元素的操作，最后我们检查元素是否真的不存在了。

总的来说，使用`.should('not.exist')`是一个确保元素不存在于页面中的简单而有效的方法。记住，在某些情况下，可能需要等待特定的异步事件完成后才能正确进行此类检查。

Well this seems to work, so it tells me I have some more to learn about .should()

    cy.get('.check-box-sub-text').should('not.exist');

You can also search for a text which is not supposed to exist:

    cy.contains('test_invite_member@gmail.com').should('not.exist')
    

Here you have the result in Cypress: `0 matched elements`

[![enter image description here](https://i.stack.imgur.com/W9QMR.png)](https://i.stack.imgur.com/W9QMR.png)

Reference: [Docs - Assertions, Existence](https://docs.cypress.io/guides/references/assertions.html#Existence)

Use `.should('not.exist')` to assert that an element does not exist in the DOM.

* * *

Do **not** use `not.visible` assertion. It would falsely pass in < 6.0, but properly fail now:

    // for element that was removed from the DOM
    // assertions below pass in < 6.0, but properly fail in 6.0+
    .should('not.be.visible')
    .should('not.contain', 'Text')
    

Migration Docs here: [Migrating-to-Cypress-6-0](https://docs.cypress.io/guides/references/migration-guide.html#Migrating-to-Cypress-6-0)

cy.get('[data-e2e="create-entity-field-relation-contact-name"]').should('not.exist');
    

might lead to some false results, as some error messages get hidden. It might be better to use

    .should('not.visible');
    

in that case.

Cypress 如何测试某个元素是否不存在？

在Cypress中，您可以利用`.its('length')`命令来获取选择元素的长度。这个命令会返回被选元素的数量。这个功能经常用于断言，以确保DOM中存在特定数量的元素。

以下是一个例子，假设我们要测试一个包含多个类为`.list-item`的列表项的页面：

```javascript
describe('List items count test', () => {
  it('should have the correct number of .list-item elements', () => {
    // 访问你的页面
    cy.visit('your-page-url');
    
    // 获取所有的.list-item元素，并断言其长度
    cy.get('.list-item').its('length').should('eq', 5);
  });
});
```

在这个例子中，我们期望页面上有5个`.list-item`的元素。`.its('length')`会获取到`.list-item`的数量，并且`.should('eq', 5)`用于断言这个数量是否等于5。如果不等于5，测试会失败。

Found a solution, This works to check a count of items:

    cy.get('.datatable').find('tr').should('have.length', 4)
    

This does not work with the `Cypress.$()` method of notation.

Reference: [https://docs.cypress.io/guides/references/assertions.html#Length](https://docs.cypress.io/guides/references/assertions.html#Length)

You can also get the length of a selection of items [through its property](https://docs.cypress.io/api/commands/its.html), for example:

    cy.get('.datatable').find('tr').its('length').should('eq', 4)
    cy.get('.datatable').find('tr').its('length').should('be.gte', 4)
    

In addition to `should('have.length', 4)`

[![enter image description here](https://i.stack.imgur.com/LeFkS.png)](https://i.stack.imgur.com/LeFkS.png) I tested with Cypress version 3.1.0 and 3.2.0.

if you want more flexible and have a dynamic result use this.

    cy.get('.listings-grid')
      .find('.listing')
      .then(listing => {
        const listingCount = Cypress.$(listing).length;
        expect(listing).to.have.length(listingCount);
      });

One option is to use "have.length" ...

    cy.get('.datatable tr').should('have.length', 4)
    

...another option is to use should

    cy.get('.datatable tr').should(($tr) => {
        expect($tr).to.have.length(4)
    })
    

...or then (synchronous queries)

    cy.get('.datatable').then(($table) => {
      // synchronously query to find length of elements
      expect($table.find('td').length).to.equal(4)
    })

From the [cypress API docs .should() section](https://docs.cypress.io/api/commands/should.html#Function), using an [arrow function](http://es6-features.org/#ExpressionBodies):

    cy.get('.datatable').find('tr').should(($listOfElements) => {
       expect($listOfElements).to.have.length(4)
       // any other assertions, for example the below one
       // expect($listOfElements).to.have.any.keys('key1', 'key2')
    })
    

This approach will allow you to use [Chai BDD notation](https://docs.cypress.io/guides/references/assertions.html#BDD-Assertions) and assert more than one thing on your list of elements.

Cypress相关问题

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

Cypress 如何比较数组？

如何在 Cypress 中等待两个并行的 XHR 请求

Cypress 如何等待某个元素消失？

Cypress 如何等待某个元素消失？

Cypress 如何获取 baseURL 的值？

如何在使用 Cypress 执行所有测试代码之前执行公共代码？

Cypress 如何等待页面加载完成？

Cypress 如何在使用 if 条件时检测某个元素是否可见？

Cypress 如何获取元素的 ` href `属性？

Cypress 如何检查可能不存在的元素?

Cypress 如何在执行测试代码之前在 localStorage 中设置令牌 token ？

Cypress 如何选择某个元素中的第 n 项？

Cypress 如何测试某个元素是否不存在？

Cypress 如何获取选择的元素的长度？