Playwright Page Object Model - Step by Step Demo

Playwright Page Object Model - Step by Step Demo

Automation Step by Step via YouTube Direct link

Step 1 - Create a new folder and open in IDE or Editor like VS Code

2 of 12

2 of 12

Step 1 - Create a new folder and open in IDE or Editor like VS Code

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Playwright Page Object Model - Step by Step Demo

Automatically move to the next video in the Classroom when playback concludes

  1. 1 Introduction
  2. 2 Step 1 - Create a new folder and open in IDE or Editor like VS Code
  3. 3 Step 2 - Initialize a new Node.js project by running npm init -y to create a package.json file
  4. 4 Step 3 - Install & Setup Playwright by running npm init playwright@latest
  5. 5 Step 4 - Create a demo login test, can use Test Generator to record npx playwright codegen
  6. 6 Step 5 - Run tests and check results - npx playwright test & npx playwright show-report
  7. 7 Step 6 - Create new folder "pages" in your project, this will contain all page objects
  8. 8 Step 7 - Create a new file and class for each page e.g. login.js and LoginPage
  9. 9 Step 8 - In the class create element locators & action methods for login page
  10. 10 Step 9 - In test file, import the page class, create instance of it, & use methods from LoginPage class
  11. 11 Step 10 - Run the test npx playwright test and check results
  12. 12 Upload project on GitHub

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.