Cypress is a modern and efficient front-end end-to-end testing framework suitable for E2E testing. It runs directly in the browser, which is faster to respond and more convenient to debug. Before use, you need to install Node.js and npm, and then install it through the command npm install cypress --save-dev, and the graphical interface can be started through npx cypress open. The file structure will be automatically generated for the first time. It is recommended to write common commands into the scripts of package.json for call. When writing test cases, each file is placed under cypress/e2e with suffixed with .cy.js or .cy.ts. A simple login test includes accessing pages, filling in forms, clicking to submit and verifying jump URLs. Cypress provides chained APIs such as cy.visit(), cy.get(), .type(), .click() and assertion methods. During debugging, you can use the Cypress interface to view the operation records and DOM status. Common failure causes include elements not loading, selector unstable, or page jumping is not waiting for confirmation. You can use cy.wait(), cy.intercept() and semantic properties such as data-cy. For example, after clicking the button, wait for the interface request to complete and then assert the URL: first intercept the request and name it, click the button, wait for the request to complete, and then verify the URL. As the number of tests increases, the file structure should be organized according to the functional modules, such as login.cy.js, dashboard/overview.cy.js, etc. Cypress executes all .cy.js files by default, or runs a specific file or directory through the --spec parameter. When writing a good test, you need to pay attention to details, such as using the waiting mechanism rationally, maintaining highly readable selectors, avoiding hard-coded data, etc.

End-to-end testing of front-end applications is a key step to ensure that the product runs stably under real user operations. As a modern and efficient testing framework, Cypress is especially suitable for E2E testing. It does not rely on network communication like traditional Selenium, but runs directly in the browser, which is faster to respond and more convenient to debug.

If you are just starting to get involved in Cypress, you may feel that its structure and writing are a bit different. In fact, as long as you master a few key points, you can quickly get started and write stable and reliable test cases.

Installation and Initialization

Before using Cypress, make sure that Node.js and npm are installed in the project. Then run it in the project root directory:

• npm install cypress --save-dev

After the installation is completed, the graphical interface can be started through npx cypress open . The basic file structure is automatically created during the first run, including the cypress/e2e directory and sample test files.

If you want to skip the graphical interface and run all tests directly, you can use:

• npx cypress run

It is recommended to write common commands into the scripts of package.json , for example:

 "scripts": {
  "test:e2e": "cypress run",
  "test:e2e:open": "cypress open"
}

This makes subsequent calls much more convenient.

Write the first E2E test case

Cypress uses JavaScript or TypeScript to write test scripts, with concise and intuitive syntax. Each test file is usually placed under cypress/e2e with the suffix of .cy.js or .cy.ts .

One of the easiest login process tests might look like this:

 describe('Login Flow', () => {
  it('should successfully log in with valid credentials', () => {
    cy.visit('/login');
    cy.get('#email').type('user@example.com');
    cy.get('#password').type('password123');
    cy.get('button[type="submit"]').click();
    cy.url(). should('include', '/dashboard');
  });
});

This code does a few things:

• Open /login page
• Fill in the email and password in the input box
• Click the Submit button
• Check if the URL jumps to /dashboard

Cypress provides a chained API, such as cy.get() to get elements, .type() to input content, .click() to trigger clicks, all of which are easy to understand and use.

Debugging and failure handling skills

One of the biggest advantages of Cypress is its own debugging tool. When you run the test with cypress open , the left side will display the operation record of each step, and the right side will be the page rendered in real time. Click a certain step to view the DOM status at that time, which is very convenient for troubleshooting problems.

Common causes of failure include:

• The element is not loaded and executed (can be processed with cy.wait() or cy.intercept() )
• The selector is inaccurate or changes frequently (it is recommended to use semantic properties such as data-cy )
• Page jump is not waiting for confirmation (add cy.url().should(...) assertion)

For example, if a button needs to request an interface to jump after clicking, you can wait for it to complete:

 cy.intercept('POST', '/api/login').as('loginRequest');
cy.get('button[type="submit"]').click();
cy.wait('@loginRequest');
cy.url(). should('include', '/dashboard');

This can avoid assertion failure due to network delay.

How to organize multiple test files

As the number of tests increases, it becomes important to organize test documents reasonably. You can divide directories by functional modules, such as:

 cypress/e2e/
├── login.cy.js
├── dashboard/
│ ├── overview.cy.js
│ └── settings.cy.js
└── profile/
    └── edit-profile.cy.js

Cypress will recursively search and execute all .cy.js files by default. You can also run only certain folders or files by configuring, for example:

• npx cypress run --spec "cypress/e2e/login.cy.js"

Or use wildcards:

• npx cypress run --spec "cypress/e2e/dashboard/*.cy.js"

This allows for flexible control of the test range in CI/CD.

Basically that's it. Cypress is not difficult to get started, but if you want to write a good test, you still have to pay attention to the details, such as using the waiting mechanism rationally, maintaining highly readable selectors, and avoiding hard-coded data. By doing this well, your front-end applications can be delivered to users with more confidence.

The above is the detailed content of End-to-End Testing with Cypress for Frontend Applications. For more information, please follow other related articles on the PHP Chinese website!