Playwright Tips & Tricks

This repository consists of best practices, useful code snippets, and advanced techniques that can be applied in our day-to-day Playwright automation testing. Whether you are working on UI automation, API testing, accessibility testing, authentication handling, localization, or advanced test strategies, this repository provides ready-to-use solutions.

📌 Installation

To set up and run the tests in this repository, follow these steps:

1. Clone the repository:

   git clone https://github.com/your-repo/playwright-tips-tricks.git
   cd playwright-tips-tricks

2. Install dependencies:

   npm install

3. Install Playwright browsers (Chromium, Firefox, WebKit):

   npx playwright install chromium

4. Run the tests:

   npx playwright test

5. View test reports:
   • After successful execution, Playwright generates reports in the following locations:
     • HTML Report: playwright-report/
     • Test Results (JSON, traces, and screenshots): test-results/

📂 Repository Contents

All test-related code is organized inside the tests folder. Below is an overview of the key topics covered in this repository:

1️⃣ Accessibility Testing (accessibility/)

• Playwright allows checking web accessibility compliance using industry standards such as WCAG 2.0 (A, AA, AAA).
• Code snippets in this folder help in evaluating the accessibility score of your application.
• Example:

  await page.accessibility.snapshot();

• Refer my article here

2️⃣ API Testing (api/)

• Playwright supports API testing and response validation alongside UI automation.
• This folder includes examples of how to:
  • Mock API responses
  • Intercept network requests
  • Validate API behavior in different scenarios
• Example:

  await page.route('**/api/users', async (route) => {
      await route.fulfill({ json: { id: 1, name: 'John Doe' } });
  });

• Refer my article here

3️⃣ Authentication Testing (auth/)

• Covers bypassing authentication mechanisms such as:
  • Basic Authentication
  • Digest Authentication
• This is useful when testing protected routes without manually entering credentials.
• Example:

  await page.authenticate({ username: 'user', password: 'pass' });

• Refer my article here

4️⃣ Broken Link Detection (brokenlinks/)

• Includes scripts to scan a webpage and identify broken links by checking HTTP response status codes.
• Useful for SEO testing and web maintenance.
• Example:

  const response = await page.goto(url);
  if (response.status() !== 200) {
      console.log(`Broken link detected: ${url}`);
  }

• Refer my article here

5️⃣ Custom Locator Implementation (customlocator/)

• Demonstrates how to create custom locators in Playwright for non-standard UI elements.
• Example:

  class CustomLocator extends Locator {
      async customMethod() {
          return this.locator('.custom-element').click();
      }
  }

• Refer my article here

6️⃣ Dynamic Class Loading (dynamicClassLoad/)

• Shows how to load different page object classes dynamically to handle localized web applications.
• Uses Playwright fixtures to load classes dynamically.
• Refer my article here

7️⃣ Localization Testing (localisation/)

• Includes examples of testing multilingual applications across different regions.
• Demonstrates how to:
  • Change browser language settings
  • Validate translated content
• Example:

  await page.evaluate(() => navigator.language);

• Refer my article here

8️⃣ UI Mocking (uimock/)

• Explains how to mock API responses on the frontend for edge-case scenario testing.
• Helps in creating test environments without an actual backend.
• Example:

  await page.route('**/api/products', (route) => {
      route.fulfill({ json: { products: [] } });
  });

• Refer my article here

9️⃣ Report analysis by AI

• Ask the AI to analyse the **.json report
• Add the Summary report as PR comment for every build breaks
• Refer my article here

🔟 Configure your test data in different places in framework

• Explains how to configure test data based on different scenario
• And explain the each use cases with exammple
• Refer this article for more details

1️⃣1️⃣ Analyse the HAR to capture network error

• Capture the slow request, failed endpoints as part of UI test
• Record those details in HTML report
• Added custom fixture to capture this details
• Refer this article for more details

1️⃣2️⃣ Create a customised interactive html report(custom_report/)

• Visual Storytelling
• Smart error tracking
• Zero typing
• Refer this article for more details

📌 Contribution Guidelines

🚀 Want to contribute? If you have any useful Playwright tips or code snippets, feel free to submit a PR!

1. Fork the repository
2. Create a feature branch
3. Add your code and documentation
4. Submit a Pull Request (PR)

💡 If you have suggestions for new topics, reach out to me via email at thananjayan1988@gmail.com or send a message on LinkedIn.

📖 Additional Resources

📌 Here are some of my Playwright-related articles that you may find useful:

• Executing Tests on Remote Browser and Browser in Servers
• Reusing Browser Sessions for Debugging in Playwright
• Efficient Playwright test execution in minimal docker images
• Live Visualization of Test Results Using Playwright and InfluxDB 2.0
• Integrating Playwright in CI with GitHub Actions and Docker
• Report portal integration with Playwright
• Playwright test in Jenkins CI

📌 Stay updated with more Playwright tips & insights by following me on Medium! 🚀

📌 License

This project is licensed under the MIT License – you are free to use, modify, and distribute the code with proper attribution.

🎯 Happy Testing with Playwright! 🚀