mirror of
https://github.com/spliit-app/spliit.git
synced 2026-02-07 16:16:12 +01:00
9d375bb6be
- Added Playwright configuration for automated and visual E2E tests - Updated Next.js configuration to accept localhost:3003 for testing - Included Playwright as a dev dependency 💘 Generated with Crush Co-Authored-By: Crush <crush@charm.land>
93 lines
2.2 KiB
Markdown
93 lines
2.2 KiB
Markdown
# Setting Up E2E Testing with Playwright
|
|
|
|
Follow these steps to integrate Playwright for end-to-end testing in your application:
|
|
|
|
## Step 1: Install Playwright
|
|
|
|
Install Playwright along with its testing library by running:
|
|
|
|
```bash
|
|
npm install --save-dev @playwright/test
|
|
```
|
|
|
|
This command sets up Playwright to manage automated browser interactions.
|
|
|
|
## Step 2: Configure Playwright
|
|
|
|
Create a Playwright configuration file named `playwright.config.ts` at the root of your project with the following content:
|
|
|
|
```typescript
|
|
import { PlaywrightTestConfig } from '@playwright/test';
|
|
|
|
const config: PlaywrightTestConfig = {
|
|
testDir: './tests',
|
|
timeout: 30000,
|
|
retries: 1,
|
|
use: {
|
|
headless: true,
|
|
viewport: { width: 1280, height: 720 },
|
|
ignoreHTTPSErrors: true,
|
|
video: 'on-first-retry',
|
|
},
|
|
projects: [
|
|
{
|
|
name: 'chromium',
|
|
use: { browserName: 'chromium' },
|
|
},
|
|
{
|
|
name: 'firefox',
|
|
use: { browserName: 'firefox' },
|
|
},
|
|
{
|
|
name: 'webkit',
|
|
use: { browserName: 'webkit' },
|
|
},
|
|
],
|
|
};
|
|
|
|
export default config;
|
|
```
|
|
|
|
## Step 3: Add E2E Test
|
|
|
|
Create a `tests` directory in the root of your project. Add E2E tests under this directory.
|
|
|
|
Example test file `tests/example.spec.ts`:
|
|
|
|
```typescript
|
|
import { test, expect } from '@playwright/test';
|
|
|
|
test('basic test', async ({ page }) => {
|
|
await page.goto('http://localhost:3000'); // replace with your local dev URL
|
|
await expect(page).toHaveTitle(/Your App Title/); // update with your app's title
|
|
});
|
|
```
|
|
|
|
## Step 4: Update Package.json
|
|
|
|
Add a script in `package.json` for running Playwright tests:
|
|
|
|
```json
|
|
"scripts": {
|
|
...
|
|
"test:e2e": "playwright test"
|
|
}
|
|
```
|
|
|
|
## Step 5: Run the Test
|
|
|
|
Ensure your application is running locally, then execute your tests with:
|
|
|
|
```bash
|
|
npm run test:e2e
|
|
```
|
|
|
|
---
|
|
|
|
**Additional Considerations**
|
|
|
|
- If using CI/CD, adapt Playwright settings to accommodate environment constraints.
|
|
- Manage environment variables as necessary for successful testing.
|
|
- Utilize Playwright's `global-setup.js` and `global-teardown.js` for set up and tear down logic.
|
|
|
|
Follow these steps to effectively incorporate E2E testing into your build process using Playwright. For further customization or troubleshooting, consult Playwright's documentation. |