Cypress 学习向导

1、定义自定义命令

在 cypress/support/commands.js 文件中添加以下代码：

Cypress.Commands.add('getByTestId', (testId) => {
    return cy.get(`[data-testid=${testId}]`);
});

使用自定义命令,测试文件中，可以使用自定义命令 cy.getByTestId 来代替 cy.get('[data-testid="..."]')。这使得代码更加简洁和可读

describe('Data TestID Example', () => {
    it('should find and interact with elements using data-testid', () => {
        cy.visit('path/to/your/page.html'); // 访问你的HTML页面

        // 断言 div 的文本内容
        cy.getByTestId('unique-id').should('have.text', 'Hello, World!');

        // 输入文本到 input 框
        cy.getByTestId('username-input').type('John Doe');
        cy.getByTestId('username-input').should('have.value', 'John Doe');

        // 点击按钮
        cy.getByTestId('submit-button').click();
    });
});

2、引入其他测试库，比如@testing-library/cypress

npm install --save-dev @testing-library/cypress

配置 Cypress Testing Library
在 cypress/support/index.js 文件中添加以下代码，以引入 Cypress Testing Library：

import '@testing-library/cypress/add-commands';

现在你可以使用更简洁的 cy.findByTestId 方法来选择元素。例如：

describe('Data TestID Example', () => {
    it('should find and interact with elements using data-testid', () => {
        cy.visit('path/to/your/page.html'); // 访问你的HTML页面

        // 断言 div 的文本内容
        cy.findByTestId('unique-id').should('have.text', 'Hello, World!');

        // 输入文本到 input 框
        cy.findByTestId('username-input').type('John Doe');
        cy.findByTestId('username-input').should('have.value', 'John Doe');

        // 点击按钮
        cy.findByTestId('submit-button').click();
    });
});