What is Playwright? | Playwright with Typescript & Jest - Part 1

What is Playwright?

Playwright by Microsoft did start as a fork of Puppeteer
Puppeteer is a node library to automate the chromium browsers with the JavaScript API

--Capabilities:
* It spans multiple pages, domains, and iframes
* Intercept network activity for stubbing and mocking network requests
* Emulate mobile devices, geolocation, permissions
* Native input events for mouse and keyboard
* Upload & download support

Playwright enables fast, reliable, and capable automation across all modern browsers

-- Support for all browsers
* Test on Chromium, Firefox, and WebKit
* Test for mobile (device emulation)
* Headless and headful

-- Fast and reliable execution
* Auto-wait APIs (clicks, types, etc)
* Timeout-free automation
* Lean parallelization with browser contexts
* Wide variety of selectors (locators) & shadow-dom support
* Can handle single page application

-- Pre-requirements:
1. Node JS
2. VS Code Editor

Packages:
"devDependencies": {
"jest": "^26.6.3",
"jest-playwright-preset": "^1.4.5",
"playwright": "^1.8.0",
"typescript": "^4.1.3" ,
"ts-jest": "^26.5.0"},

Chapters:
00:00 Playwright
0:35 What is playwright?
2:00 Why playwright?
3:00 Playwright installation

#playwright #letcode

[prasadverma]

Hi Koushik, I tried to configure playwright but it failed with error "Failed to download chromium, caused by Error: unable to get local issuer certificate" can you help me to resolve this. Thank you

[naveenbv]

@Letcode with Koushik, Super Thailava, After getting so much of knowledge from your channel and hands-on in my own project by creating a multiple frameworks on Protractor+TS (complete credits goes to I was in lot of confusion whether to start with Cypress or Playwright...
But now I finally decided to follow the teacher(VAATHI) in you😎
Thanks a lot for all your efforts, To all the channel viewers please click on join and boost Koushik to provide us the quality content likeway🙏🙏🙏

[davidcleveland]

Thank you for the post. Do you have an example of how to integrate playwright and jest into angular app for e2e testing only? Thanks

[Neha_Kelkar]

Hi Kaushik, I have made great progress in playwright just because of you!! Could you please make video about wrapper methods/classes in playwright?

[naveenbv]

And Yes even I would join my hands with you guys 🙏

[rschennupati]

what are the VSCode extension you are using to show those file/folder icons for npm, js, test etc..?

[oleh]

Hi!
Do you have a video or tutorial on how to use before all in case if I need check the created items in one test that were created in another one

[ahmedjumaah]

Hi Koushik, thanks for the videos. I have a question about slides swiping in puppeteer, how can I emulate slides swiping from right to left and then click a button ? Thanks

[SnapFootballSkils]

Hello Koushik am new to automation
Just a question . Instead of gherkin are you covering anything else for BDD in your course ? I could not figure out which framework u using ? Can you pls clarify ?
Do you have any paid live classes?

[AliKhan-wmlt]

Hi Koushik,
A common question that I'm asked in many meetings is, why should you go for typescript instead of javascript? And the only answer that I have is the type safety. Are there any other factors that we can say so that we can propose typescript over javascript?

[kancharlashrivani]

Hii Koushik,
What r the packages u r provided in discription if I use that packages I am getting some errors what should I do?
Is there any difference are there

[raginigupta]

Can we drag and drop any element from one window to another window through Playwright?

[BrajeshKumar-iuwo]

playwright is good for angular js application?, if not then can you suggest me others tool?
As per your protrator tutorial I have design Framework and test cases writen but unfortunately protractor will deprecated in 2022, Pls. help me, I am one men army in my org. for automation

[tanujlakshakar]

Could you also please share how playwright works it's architecture like we have in Selenium.

[azimadayani]

Hi Kaushik.
I’ve quick question: After clicking on clear button how do you verify if it actually cleared form

[wadegoodman]

Hello, I have all the same code and im getting 3 failed test. Im using Mac. Is there an update I need to do or something different for mac?

[mohapatradharitree]

Hi Koushik, If we have to migrate from Protractor to other tool. which one will be your preference. Will Playwright be suitable or we can go for Cypress or wdio

[Rohitsaini-hemc]

Hi Kaushik,

Yes, Playwright will be popular due to support all modern application and languages like Java/js/c#/python.

If we talk about Javascript/typescript

only jasmine support soft assertion by default.

Problem.

Example.

I Open the URL
Click Save button
Verify validation error
Enter Username and password
Click Save button
I See homepage.


If "Verify validation error" step/function will fail rest of the thing will not execute and that particular test case/scenario fail.
Developer fix validation error and again i execute same test Then
unable to enter username in text box .
Then again dev will fix.

this is a paining area for dev and

Mocha/jest does not support soft assertion (only jasmine support).
but if we use playwright with jasmine we cant append logs or steps in report.
jest report is very nice and we attached steps in report for each and every "it" block. but again jest not support soft asseertion.

Question is, how to handle in playwright with jest soft assertion?

If we use playwright with java (TestNG) we can use soft assertion .


Thanks

[Iamrocky]

Hi Koushik I have a query I have three tests in a file named ty.spec.ts namely

two one
One two one
don2 two one

I need to run only test “two one”
I am getting error if I use pattern match. Please help . I want to run through command line . Using macOS

[shriniwasalle]

Hey Koushik,
I am damn sure this Playwright series will be more popular in coming days, Keep it up.
I am facing one issue, if you could resolve that would be helpful. I have webpage with left and right parts, left part has one button/link, once you click that button you will see another Button on right side. But, when I click left part button I am seeing the white/blank window with only url is shown, nothing is displayed on the web page, but if I do the same thing manually it works fine, by script it is giving this issue. Do you have any idea what could be the issue?

Thanks in advance!