Playwright with JavaScript and TypeScript Lecture Notes

Introduction

• Welcome by Naveen from Naveen Automation Lab.
• Starting a new series on Playwright using JavaScript and TypeScript.
• Comparison with Selenium in different programming languages (Python, Java).

Importance of JavaScript Knowledge

• Basic understanding of JavaScript is essential before diving into Playwright.
  • Topics to cover:
    • For loops
    • Conditional statements
    • String manipulations
    • Arrays and functions
    • Object creation
• Common mistakes:
  • Jumping into Playwright without proper language knowledge leads to confusion.

Setting Up Playwright on Windows

Prerequisites

1. Download Node.js
   • Node.js is a server environment required for Playwright.
   • Ensure to install the correct version (Windows installer).
2. Download Visual Studio Code
   • Recommended editor for JavaScript development.
   • Link will be provided in video description.

Installation Steps

1. Install Node.js
   • Double-click the installer and follow the prompts.
   • Verify installation by running node --version and npm --version in the command prompt.
2. Install Visual Studio Code
   • Download and install from the official site.

Setting Up Playwright Project

• Bookmark the official Playwright website for documentation.
• After installing Node.js, create a new folder for the Playwright project in your desired directory.
• Open Visual Studio Code and select the newly created folder.

Installing Playwright

1. Open the terminal in Visual Studio Code.
2. Run the command to initialize Playwright:
   npm init playwright@latest
3. Answer prompts regarding TypeScript/JavaScript and testing configurations.
4. Confirm downloading of Playwright browsers (Chromium, Firefox, WebKit).

Project Structure

• After installation, check for:
  • node_modules: Contains all necessary libraries.
  • tests: Directory for test specifications.
  • package.json: Contains project dependencies and configurations.
  • playwright.config.ts: Configuration file for Playwright settings.

Writing Basic Tests

• Import necessary modules like test and expect from Playwright.
• Example of a simple test:

  test('Test Name', async ({ page }) => {
      await page.goto('https://playwright.dev');
  });
  

• Run tests using the command:
  npx playwright test
  • Default runs in headless mode.

Running Tests in Headed Mode

• To see the browser actions, run with the --headed option:
  npx playwright test --headed

Generating Reports

• Use npx playwright show-report to view reports after test execution.
• Reports show results for each test case across different browsers.

Additional Commands

• Run tests for specific projects or folders.
• Modify parallel execution settings in playwright.config.ts.
• Customize configurations for various browsers and devices directly in the config file.

Conclusion

• Importance of practice and writing tests in Playwright.
• Future sessions will cover advanced topics and real-time examples.
• Encouragement to subscribe and share the content.

---

Note: This is a summary of the lecture and further details can be explored in follow-up sessions.