Advanced Playwright TypeScript Tutorial | Introduction and Installation | Part I | LambdaTest

From The House of LambdaTest LambdaTest Tutorials
, ,
1

:rocket: New Playlist Alert! :rocket:

Hey folks, we’re excited to share our Advanced Playwright TypeScript Tutorial playlist! :tada:

Start your journey with Part 1 where we cover: Introduction to Playwright Installation & Setup Dive in and elevate your testing skills! :computer::bulb:

2

Parallel Test Execution with Playwright For large test suites, running tests in parallel can significantly reduce the execution time. Playwright allows you to easily execute tests in parallel to improve efficiency.

Example:

import { test, expect } from '@playwright/test';

test('Test Case 1', async ({ page }) => {
  await page.goto('https://example.com');
  expect(await page.title()).toBe('Example Domain');
});

test('Test Case 2', async ({ page }) => {
  await page.goto('https://playwright.dev');
  expect(await page.title()).toBe('Playwright');
});

Running Tests in Parallel: You can configure the parallel execution in the Playwright configuration file (playwright.config.ts) by setting the workers option.

// playwright.config.ts
module.exports = {
  workers: 4, // Run tests with 4 workers in parallel
};

Explanation:

Playwright allows you to run tests in parallel with multiple workers, speeding up your test execution when you have a large test suite.

3

Playwright allows you to manage browser popups such as alerts, prompts, and confirmation dialogs. You can interact with these popups during your tests to simulate real user behavior.

Example:

import { test, expect } from '@playwright/test';

test('Handle Popups and Alerts', async ({ page }) => {
  // Handling an alert popup
  page.on('dialog', async dialog => {
    console.log(dialog.message()); // Log the alert message
    await dialog.accept(); // Accept the alert
  });

  // Trigger an alert in the page
  await page.evaluate(() => {
    alert('This is an alert!');
  });

  // Check the page content after alert
  expect(await page.title()).toBe('Alert Handled');
});
Explanation:

The dialog event is used to listen for popups, allowing you to accept or dismiss them based on your test scenario.

4

In addition to element interactions, Playwright allows you to intercept and modify network requests made by the browser. This is useful for testing scenarios like mocking server responses, simulating network failures, or verifying network traffic.

Example:

import { test, expect } from '@playwright/test';

test('Intercept Network Requests', async ({ page }) => {
  // Intercept requests to the API endpoint
  await page.route('**/api/*', route => {
    route.fulfill({
      status: 200,
      body: JSON.stringify({ success: true })
    });
  });

  await page.goto('https://example.com');
  // Test the mocked API response
  const response = await page.evaluate(async () => {
    const res = await fetch('/api/data');
    return res.json();
  });

Explanation:

The route() method allows you to intercept requests matching a specific URL pattern (e.g., **/api/*). You can modify the request or mock the response using route.fulfill().