Testing
Testing helps you write and maintain working Astro code. Astro supports many popular tools for unit tests, component tests, and end-to-end tests including Jest, Mocha, Jasmine, Cypress and Playwright. You can even install framework-specific testing libraries such as React Testing Library to test your UI framework components.
Testing frameworks allow you to state assertions or expectations about how your code should behave in specific situations, then compare these to the actual behavior of your current code.
Playwright
Section titled PlaywrightPlaywright is an end-to-end testing framework for modern web apps. Use the Playwright API in JavaScript or TypeScript to test your Astro code on all modern rendering engines including Chromium, WebKit, and Firefox.
Installation
Section titled InstallationYou can get started and run your tests using the VS Code Extension.
Alternatively, you can install Playwright within your Astro project using the package manager of your choice. Follow the CLI steps to choose Javascript/Typescript, name your test folder, and add an optional Github Actions workflow.
npm init playwright@latest
pnpm dlx create-playwright
yarn create playwright
Create your first Playwright test
Section titled Create your first Playwright test- Choose a page to test. We will use the example
index.astro
page below.
---
---
<html lang="en">
<head>
<title>Astro is awesome!</title>
<meta name='description' content="Pull content from anywhere and serve it fast with Astro's next-gen island architecture." />
</head>
<body></body>
</html>
- Create a new folder and add the following test file in
src/test
. Copy and paste the following test into the file to verify that the page meta information is correct. Update the value of the page<title>
to match the page you are testing.
test('meta is correct', async ({ page }) => {
await page.goto("http://localhost:3000/");
await expect(page).toHaveTitle('Astro is awesome!');
});
Running your Playwright tests
Section titled Running your Playwright testsYou can run a single test or several tests at once, testing one or multiple browsers. By default, your test results will be shown in the terminal. Optionally, you can open the HTML Test Reporter to show a full report and filter test results.
- To run our test from the previous example using the command line, use the
test
command. Optionally, include the file name to run just the single test:
npx playwright test index.spec.ts
- To see the full HTML Test Report, open it using the following command:
npx playwright show-report
Advanced: Launching a development web server during the tests
Section titled Advanced: Launching a development web server during the testsYou can also have Playwright start your server when you run your testing script by using the webServer
option in the Playwright configuration file.
Here is an example of the configuration and commands required when using Yarn:
-
Add a test script to your
package.json
file in the project root, such as"test:e2e": "playwright test"
. -
In
playwright.config.ts
, add thewebServer
object and update the command value toyarn preview
.
import type { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
webServer: {
command: 'yarn preview',
url: 'http://localhost:3000/app/',
timeout: 120 * 1000,
reuseExistingServer: !process.env.CI,
},
use: {
baseURL: 'http://localhost:3000/app/',
},
};
export default config;
- Run
yarn build
, then runyarn test:e2e
to run the Playwright tests.
More information about Playwright can be found in the links below: