PlayWright Training | PlayWright Automation Training

1
How to Get Started with Playwright Automation
Testing
www.visualpath.in
91-7032290546
2
Introduction to Playwright

• Developed by Microsoft for end-to-end testing
• Supports multiple browsers Chromium, Firefox,
  WebKit
• Enables testing of modern web applications
• Built on Node.js
• Offers reliable automation across platforms
• Great for UI testing
• Open-source and actively maintained

3
Why Use Playwright?

• Cross-browser testing with one API
• Headless and headful mode support
• Powerful automation capabilities
• Auto-wait feature for better test reliability
• Easy debugging and snapshots
• Parallel test execution supported
• Mobile device emulation
• CI/CD integration ready

4
Installation Prerequisites

• Node.js (LTS version recommended)
• npm or yarn as package manager
• Code editor (Visual Studio Code suggested)
• Terminal access (Command Prompt or shell)
• Admin privileges for setup
• Git (for version control)
• Internet connection for package downloads
• Basic JavaScript/TypeScript understanding

5
Setting Up a Project

• Initialize Node.js project npm init -y
• Install Playwright npm i -D _at_playwright/test
• Optional Use npx playwright install for browser
  binaries
• Create a test folder /tests
• Add test script in package.json
• Example "test" "npx playwright test"
• Organize tests by feature or flow
• Set up Git repo for tracking

6
First Playwright Test Script

• Create test file example.spec.js
• Import playwright const test, expect
  require('_at_playwright/test')
• Basic structure test('title', async ( page )
  gt ...)
• Navigate to site await page.goto('https//example
  .com')
• Assert elements/texts
• Use expect expect(page).toHaveURL(...)
• Save file and run with npx playwright test
• Validate output

7
Understanding Test Syntax

• test() is the core function
• Takes description and async function
• Context page injected automatically
• await is used for all async actions
• Assertions with expect()
• Group tests with test.describe()
• Run setup/cleanup with test.beforeAll() /
  afterAll()
• Modular and scalable structure

8
Locators and Selectors

• Locate elements via CSS or text
• page.locator('selector')
• Text-based locator('textLogin')
• Chained locators for nesting
• XPath also supported locator('//button')
• Use nth() for repeated elements
• getByRole, getByTestId for accessible apps
• Robust and stable locator strategies

9
Playwright Test Generator

• Use codegen npx playwright codegen lturlgt
• Opens browser, records interactions
• Generates test code automatically
• Easy to learn syntax from recording
• Supports multiple languages
• Save and edit scripts
• Great for rapid prototyping
• Helps reduce manual typing errors

10
Handling Assertions

• Validating page elements
• expect(locator).toHaveText('...')
• toBeVisible(), toBeHidden()
• toHaveValue(), toHaveAttribute()
• Chained assertions supported
• Waits for conditions automatically
• Useful in dynamic content validation
• Avoid flaky tests with smart waits

11
Working with Multiple Pages

• Use context.newPage() for separate windows
• Handle pop-ups and tabs
• Use waitForEvent('popup') for popups
• Interact with each page independently
• Close pages explicitly
• Manage authentication flows
• Useful for multi-window apps
• Test session separation

12
Visual Testing and Screenshots

• Take screenshot page.screenshot( path
  'screenshot.png' )
• Use for regression testing
• Full-page or element screenshots
• Capture before/after states
• Compare visually using tools
• Integrated with GitHub actions
• Save evidence for QA reporting
• Enhance test confidence

13
Running Tests in CI/CD

• Use with GitHub Actions, Jenkins, Azure DevOps
• Add scripts to package.json
• Create .yml pipeline file
• Ensure npx playwright install in pipeline
• Run tests in headless mode
• Collect artifacts/screenshots
• Run parallel tests for speed
• Automate on every push or PR

14
Playwright Test Configuration

• Create playwright.config.ts or .js
• Define test directory and timeouts
• Configure browser options
• Set base URL
• Parallel test settings
• Retry logic on failures
• Use projects for cross-browser config
• Central place for test options

15
Advanced Features

• API testing with Playwright
• Test mobile emulation
• Geolocation mocking
• Network interception
• File uploads and downloads
• Custom test reporters
• Use TypeScript for advanced typing
• Rich feature set for robust tests

16
For More Information About PlayWright Automation
Training Address- Flat no 205, 2nd Floor,
Nilgiri Block, Aditya Enclave, Ameerpet,
Hyderabad-16 Ph. No 91- 7032290546
Visit www.visualpath.in E-Mail
online_at_visualpath.in
17
THANK YOU
www.visualpath.in