In this case study, we will explore how to implement Playwright in a real-world project. This will involve setting up a testing environment, writing and organizing tests, and integrating Playwright into a continuous integration (CI) pipeline. By the end of this section, you will have a comprehensive understanding of how to apply Playwright in a practical scenario.
Project Overview
For this case study, we will use a sample e-commerce web application. The goal is to ensure that the core functionalities, such as user login, product search, and checkout process, are working as expected.
Key Objectives:
- Set up Playwright for the project.
- Write tests for critical user flows.
- Organize tests for maintainability.
- Integrate tests into a CI pipeline.
Step 1: Setting Up Playwright
1.1 Install Playwright
First, ensure that Playwright is installed in your project. You can do this by running the following command in your project directory:
1.2 Configure Playwright
Create a configuration file playwright.config.ts to define the test environment settings:
import { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
use: {
headless: true,
viewport: { width: 1280, height: 720 },
ignoreHTTPSErrors: true,
},
projects: [
{
name: 'chromium',
use: { browserName: 'chromium' },
},
{
name: 'firefox',
use: { browserName: 'firefox' },
},
{
name: 'webkit',
use: { browserName: 'webkit' },
},
],
};
export default config;Explanation:
- headless: Runs the browser in headless mode for faster execution.
- viewport: Sets the default viewport size.
- ignoreHTTPSErrors: Ignores HTTPS errors, useful for testing in development environments.
- projects: Defines different browser configurations for cross-browser testing.
Step 2: Writing Tests
2.1 User Login Test
Create a test file login.spec.ts to verify the login functionality:
import { test, expect } from '@playwright/test';
test('User can log in with valid credentials', async ({ page }) => {
await page.goto('https://example-ecommerce.com/login');
await page.fill('#username', 'testuser');
await page.fill('#password', 'password123');
await page.click('button[type="submit"]');
await expect(page).toHaveURL('https://example-ecommerce.com/dashboard');
});Explanation:
- page.goto: Navigates to the login page.
- page.fill: Fills in the username and password fields.
- page.click: Clicks the login button.
- expect(page).toHaveURL: Asserts that the user is redirected to the dashboard after a successful login.
2.2 Product Search Test
test('User can search for a product', async ({ page }) => {
await page.goto('https://example-ecommerce.com');
await page.fill('#search', 'laptop');
await page.click('button[type="submit"]');
const productTitle = await page.textContent('.product-title');
expect(productTitle).toContain('laptop');
});Explanation:
- page.fill: Enters a search term in the search bar.
- page.textContent: Retrieves the text content of the first product title to verify the search result.
Step 3: Organizing Tests
3.1 Directory Structure
Organize your tests in a logical directory structure for better maintainability:
3.2 Using Fixtures
Create a fixtures.ts file to set up common test data or states:
import { test as base } from '@playwright/test';
export const test = base.extend({
// Define fixtures here
});Step 4: Integrating with CI
4.1 GitHub Actions
Create a .github/workflows/playwright.yml file to run tests on every push:
name: Playwright Tests
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: '16'
- run: npm install
- run: npx playwright install
- run: npx playwright testExplanation:
- actions/checkout: Checks out the repository.
- actions/setup-node: Sets up Node.js.
- npx playwright install: Installs necessary browser binaries.
- npx playwright test: Runs the Playwright tests.
Conclusion
In this case study, we covered the implementation of Playwright in a real-world project. We set up Playwright, wrote and organized tests, and integrated them into a CI pipeline. This approach ensures that your application is tested thoroughly and consistently, providing confidence in its functionality and reliability.
By applying these techniques, you can effectively use Playwright to automate testing in your projects, improving both development efficiency and software quality.
Playwright with TypeScript: From Beginner to Advanced
Module 1: Introduction to Playwright and TypeScript
- What is Playwright?
- Setting Up Your Development Environment
- Introduction to TypeScript
- Basic TypeScript Syntax
Module 2: Getting Started with Playwright
- Installing Playwright
- Creating Your First Playwright Script
- Understanding Playwright's Core Concepts
- Running Playwright Tests
Module 3: Playwright and TypeScript Basics
- Writing Tests in TypeScript
- Using TypeScript Interfaces and Types
- Debugging Playwright Tests
- Handling Asynchronous Code
Module 4: Advanced Playwright Features
- Working with Selectors
- Handling Multiple Pages and Frames
- Network Interception and Mocking
- Emulating Devices and Geolocation
Module 5: Test Automation Strategies
- Organizing Tests and Test Suites
- Using Fixtures and Hooks
- Parallel Test Execution
- Continuous Integration with Playwright
Module 6: Advanced TypeScript Techniques
- Generics in TypeScript
- Advanced TypeScript Types
- TypeScript Decorators
- TypeScript and Playwright Best Practices
Module 7: Real-World Playwright Applications
- End-to-End Testing with Playwright
- Visual Testing with Playwright
- Performance Testing with Playwright
- Case Study: Implementing Playwright in a Project