https://github.com/bakkappan/playwrighttutorialfullcourse
Playwright Tutorial Full Course
https://github.com/bakkappan/playwrighttutorialfullcourse
automation-testing playwright playwright-api playwright-automation playwright-automation-tutorial playwright-demo playwright-for-beginner playwright-framework playwright-full-course playwright-github playwright-javascript playwright-testing playwright-tests playwright-tutorial playwright-vs-cypress playwright-vs-selenium sdet software-testing test-automation
Last synced: 7 months ago
JSON representation
Playwright Tutorial Full Course
- Host: GitHub
- URL: https://github.com/bakkappan/playwrighttutorialfullcourse
- Owner: BakkappaN
- Created: 2023-12-24T07:00:36.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-21T18:49:00.000Z (11 months ago)
- Last Synced: 2025-03-25T03:41:41.452Z (8 months ago)
- Topics: automation-testing, playwright, playwright-api, playwright-automation, playwright-automation-tutorial, playwright-demo, playwright-for-beginner, playwright-framework, playwright-full-course, playwright-github, playwright-javascript, playwright-testing, playwright-tests, playwright-tutorial, playwright-vs-cypress, playwright-vs-selenium, sdet, software-testing, test-automation
- Language: JavaScript
- Homepage: https://youtube.com/playlist?list=PLUeDIlio4THEgPRVJRqZRS8uw8hhVNQCM&si=OKxRYfB12b5wvRVU
- Size: 2.92 MB
- Stars: 27
- Watchers: 4
- Forks: 23
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Playwright Full Courses
1. Playwright Tutorial Full Course - https://bit.ly/playwright-tutorial-automation-testing
2. Playwright API Testing Tutorial - https://bit.ly/playwright-api-testing-tutorial
3. Playwright with Dynamics 365 CRM - https://youtu.be/WwovRRp0f4o?si=oqPE2ux7UcDeJMm6
4. Playwright with Azure DevOps Pipeline - https://bit.ly/playwright-azure-devops-tutorial
#### Install Playwright & Select Configurations
- npm init playwright@latest
Playwright will download the browsers needed as well as create the following files.
- node_modules
- playwright.config.js
- package.json
- package-lock.json
- tests/
example.spec.js
- tests-examples/
demo-todo-app.spec.js
#### dotenv Package Installation Command
- npm install dotenv --save
#### csv-parse Package Installation Command
- npm install csv-parse
#### faker-js plugin for test data generation
- npm install @faker-js/faker --save-dev
#### luxon plugin for custom dates
- npm install --save luxon
## How to update to playwright to the latest version
- npm install -D @playwright/test@latest
- npx playwright install --with-deps #Also download new browser binaries and their dependencies:
## Playwright Important Commands
npx playwright install
- Install Browsers manually.
npx playwright test
- Runs the end-to-end tests.
npx playwright test --ui
- Starts the interactive UI mode.
npx playwright test --project=chromium
- Runs the tests only on Desktop Chrome.
npx playwright test example
- Runs the tests in a specific file.
npx playwright test --debug
- Runs the tests in debug mode.
npx playwright codegen
- Auto generate tests with Codegen.
We suggest that you begin by typing:
npx playwright test
### And check out the following files:
- .\tests\example.spec.js - Example end-to-end test
- .\tests-examples\demo-todo-app.spec.js - Demo Todo App end-to-end tests
- .\playwright.config.js - Playwright Test configuration
## Allure Report with Playwright [Screenshots, Videos & Traces]
- Step1: Install Allure Report command-line tool
### npm install -g --save-dev allure-commandline
- Step2: Install the Allure Playwright adapter.
### npm install --save-dev allure-playwright
- Step3: Add below config in playwright.config.js file.
### reporter:[
### ['html'],
### ['allure-playwright']
### ],
- Step4: Run Playwright tests.
### npx playwright test
- Step5: Generate Allure Report
### npx allure serve allure-results
or
### allure generate allure-results --clean
### allure open
## Playwright Test Report
## Integrate Playwright with Azure Devops Pipeline
There are 2 options, option1 is using yaml file & option2 is without using yaml file. let's see one by one
1. Option1 - Using YAML File
- Step1: Create a new project in ADO then Click on Project
- Step2: Click on Repos & Let's create new repository, Click on New reposiotry
- Step3: Enter Repository name & Click on Create
- Step4: Click on Clone button and get the URL. Go to your system then clone repository.
- Step5: Add all the playwright framework folders inside cloned repository
- Step6: Push all the folders into Azure devops
- Step7: Repository is ready now, let's create pipeline. Click on Pipelines->Create Pipeline
- 
- Step8: Click on Azure Repos Git
- Step9: Select previously created repository
- Step10: Select Starter Pipeline
- Step11: Copy below yaml content and paste it inside azure-pipelines.yml file.
```
trigger:
- main
pool:
vmImage: ubuntu-latest
steps:
- task: NodeTool@0
inputs:
versionSpec: '18'
displayName: 'Install Node.js'
- script: npm ci
displayName: 'npm ci'
- script: npx playwright install --with-deps
displayName: 'Install Playwright browsers'
- script: npx playwright test
displayName: 'Run Playwright tests'
env:
CI: 'true'
```
If you are running in self hosted agent replace pool commands
```
pool:
name: AgentPoolName
demands:
- agent.name -equals AgentName
```
- Step12: Click on Save and run
- Step13: You will see job queued like this.
- 
- Step14: Click on Job & Verify build status.
- Step15: Now let's Upload playwright-report folder with Azure Pipelines & Report generation
Firstly update azure-pipelines.yml file
```
trigger:
- main
pool:
vmImage: ubuntu-latest
steps:
- task: NodeTool@0
inputs:
versionSpec: '18'
displayName: 'Install Node.js'
- script: npm ci
displayName: 'npm ci'
- script: npx playwright install --with-deps
displayName: 'Install Playwright browsers'
- script: npx playwright test
displayName: 'Run Playwright tests'
env:
CI: 'true'
- task: PublishTestResults@2
displayName: 'Publish test results'
inputs:
searchFolder: 'test-results'
testResultsFormat: 'JUnit'
testResultsFiles: 'e2e-junit-results.xml'
mergeTestResults: true
failTaskOnFailedTests: true
testRunTitle: 'My End-To-End Tests'
condition: succeededOrFailed()
- task: PublishPipelineArtifact@1
inputs:
targetPath: playwright-report
artifact: playwright-report
publishLocation: 'pipeline'
condition: succeededOrFailed()
```
- Step16: Verify playwright-report folder attachment & report.
From job we can navigate into artifacts folder. Download playwright report and verify results.
2. Option2 - Without using YAML File
- Step1: Repeat step 1 to 6 above from Option1
- Step2: Click on Pipelines then click on New Pipeline
- Step3: Click on Use the classic editor & Click on Continue
- Step4: Click on Emtpy job
- Step5: Click on + icon, Search for Node and add Node.js tool installer
- Step6: Select just now added task and add Node v16 becuase playwright supports for Node v14 and above
- 
- Step7: Click on + icon, Similary add Command line task,
Display name: Install Playwright & Dependencies
Script: npm install && npx playwright install
Click on Advanced-> Click on little icon(i) & select the Link. This will enable working directory for the task.
- Step8: Add another task by clicking on + icon, search for npm & Add npm
Enter Display name, Select Command as custom & Enter Command and Arguments as run tests
In this task we are referring to the package.json file.
- Step9: Once everthing is completed now it is a time run script. Click on Save & queue.
Add commit message then click save & run.
- Step10: It looks like this
Click on Job and you will see a screen like this
- Step11: We can also upload playwright-report using Publish Pipeline Artifacts task
- Step12: Let's Publish Test Results using Publish Test Results task
- Let's run the pipeline
- Artifacts are published & also we have published test results
