Using Playwright in Vue projects is mainly used for end-to-end (E2E) testing. 1. Install Playwright to execute commands through npm or yarn and select the default configuration to start; 2. When writing tests, place the test files in the tests/ directory, and use APIs such as page.goto(), click() and expect() to verify page interaction; 3. For Vue Router and Vuex, Playwright can simulate real behavior, test routing jumps and state changes, and improve test stability by intercepting API requests; 4. When debugging, you can use the --headed parameter or playwright show-trace to view the execution process; 5. It is recommended to add test commands to the scripts of package.json for call.

Use Playwright in Vue projects is mainly for end-to-end (E2E) testing. Playwright is a powerful automated testing tool that supports multi-browser, multi-tab page, intercept network requests and other features, which is very suitable for testing the interactive logic and page behavior of Vue applications.

Install Playwright

First you need to install Playwright in the Vue project. If you are using Vue CLI or Vite, you can install it directly through npm or yarn:

 npm init playwright@latest

or:

 yarn create playwright

This command will guide you through some configuration options, such as whether TypeScript support is required, test location storage paths, whether browser UI is enabled, etc. It is recommended to select the default configuration to start, and then adjust it as needed.

Write the first E2E test

Playwright will look for test files in tests/ directory by default. You can create a simple test to verify the basic functionality of Vue pages.

For example: Suppose you have a component that changes the text content after clicking a button, you can write a test like this:

 // tests/example.spec.ts
import { test, expect } from '@playwright/test';

test('button should update text', async ({ page }) => {
  await page.goto('http://localhost:5173'); // Replace with your local development address await page.click('button');
  await expect(page.locator('p')).toHaveText('Clicked');
});

The key points here are:

• Use page.goto() to access the page
• Use click() to simulate user click
• Verify the result with expect().toHaveText()

Playwright's API is very intuitive, and most operations are as concise and clear as above.

Work with Vue Router/Vuex

If your Vue project uses Vue Router or Vuex, Playwright can also handle it. It essentially simulates the behavior of the real browser, so routing jumps and status updates can be detected normally.

Common practices include:

• Test whether the route jump is triggered correctly
• Verify that page elements change with Vuex status
• Intercept API requests and simulate specific response data for boundary testing

For example, intercept API requests:

 await page.route('**/api/data', route =>
  route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify({ items: ['Vue', 'Playwright'] }),
  })
);

This can prevent tests from relying on real interfaces, improving stability and execution speed.

Debugging and running methods

When debugging Playwright tests, you can view the browser interface in the following ways:

 npx playwright show-trace

Or directly add the --headed parameter to run the test:

 npx playwright test --headed

This will open a browser window, allowing you to see the test execution process, which is convenient for troubleshooting problems.

In addition, it is recommended to add test scripts to package.json :

 "scripts": {
  "test:e2e": "playwright test",
  "test:e2e:debug": "playwright test --headed"
}

This makes it easier to call.

Basically that's it. Playwright is not difficult to get started, but it still requires reasonable design of the test structure and assertion logic to complete coverage in a SPA like Vue.

The above is the detailed content of How to use Playwright with Vue?. For more information, please follow other related articles on the PHP Chinese website!