Get Started With Playwright Framework | Playwright Tutorial Part 56

[@aniltaurus]

Nicely Presented Akshay.. kudos..

[@akshaypramodpai7736]

Thank you Anil

[@elumalai09]

Big Thanks to Akshay for the detailed explanation. @Koushik bro - Thanks for this video. This is amazing learning for everyone. Happy to be one of your subscriber! :) Keep going!!!!

[@akshaypramodpai7736]

Glad that you liked it.☺️

[@elumalai09]

@@akshaypramodpai7736 @Koushik - I am getting "your internet access is blocked" message when i open allure report. Is this something related to proxy error?

[@akshaypramodpai7736]

@@elumalai09 I don't think so . I have not configured any proxy. Try to Delete allure-results, allure-reports and test-results folder and rerun the Test case. And try generating allure reports

[@elumalai09]

Thanks Akshay.

[@akshaypramodpai7736]

I have added logic to automatically delete allure results before execution. This should solve your issue now

[@vedikagupta1585]

Hey can you please comment on the exact advantages of playwright/test over playwright and why we should switch if we have a stable test suite in playwright

[@letcode]

One video is not enough, i have already posted several videos. You can check those..

[@azimadayani2379]

What changes needs to be made in test match after u add folders for api, db

[@letcode]

kzbin.info/www/bejne/mpaofGOifdd2Y9k

[@madhurireddy6031]

Great effort

[@akshaypramodpai7736]

Thank you Madhuri

[@mv8167]

Thank you, Akshay and Kumar, I enjoyed your framework. I have a few questions, or thoughts for future add-ons to your framework: 1) Do you also use Folio and/or Jest 2) With Allure can we track a daily report (showing a detailed report of pass/fail, exaction time)? 3) Can we use Jenkins to send out the execution results status email automatically (as TestNG has an emailable report)? THANK YOU, I am enjoying this series of testing using Playwright

[@letcode]

Hi, foloi is now known as playwright test runner and we are using that. Allure can be tracked if the folder is set to its default directory. Jenkins is possible but the email report will not work as the file size will get increased.

[@akshaypramodpai7736]

Yes using Jenkins we can send html report, but first we have to convert allure report in to emailable html. For that you have to use Fresco Allure Docker service.

[@akshaypramodpai7736]

Hi I have updated my framework template today in which with Playwright 1.17 you get emailable reports

[@tallurivamsi6413]

Its was a good demo,but Where the configs for environment like QA,UAT,PROD etc..depending upon the environment it will pick up the configs and run in the same environment. Important thing when we run in docker container in CI/CD Pipelines,where can we see the reports in gitlab or jenkins.... Please let me know your throughts on this....

[@letcode]

Thanks, I posted a few videos on whatever you asked. Pls check the playlist.

[@tallurivamsi6413]

@@letcode thank you brother for the response

[@sqalearnings4356]

Thanks for the video. Can we add logging part in Playwright framework?

[@letcode]

Yes we can 🤗

[@sqalearnings4356]

@@letcode Can you add to your Playwright series? That will be helpful

[@letcode]

Yeah ok bro

[@akshaypramodpai7736]

Logging is added in my latest build. Please checkout latest build

[@sqalearnings4356]

@@akshaypramodpai7736 Checked your code repo, but I can't see logging(loggers) in typescript code

[@kiranbenni9366]

Very well explained akshay!

[@akshaypramodpai7736]

Thank you Kiran🤩

[@rakshithkumar8213]

Very well explained Akshay👏👏👏

[@akshaypramodpai7736]

Thanks a lot Rakshit 🤩

[@ramganesh4954]

Hi Koushik, Could you please explain CI/CD with Docker container or please please share any documentation that would be really helpful for us.

[@letcode]

I don't use docker that much, but I'll try to bring some content

[@bhumilvyas989]

In POM there will be different files for different pages, so let’s say if I am on Dashboard page, do I need to rewrite/call login functions while executing dashboard test spec?

[@letcode]

kzbin.info/www/bejne/jYTHZ2COYtNphpo

[@pavithrap7655]

Nice video... Can please let me know how to download Framework from github...

[@letcode]

You can find the link in description 😊

[@AlanBeer]

Hi Koushik, there was a mention of readDataFromExcel in the code from Akshay - but it would be great if you could do a video on steps (installs, code, etc) needed to read data from an excel file and onto populating a page during a test.ts. It would also be great to discuss how that would work in a framework - reading test data from a feed file and using it to test screens whilst in parallel with PW device-projects (and avoiding duplicate record problems if more than one PW instance tries the same test record). [I'm trying to test a system with list-edit screens rather than just webpages].

[@letcode]

Yes sure. I'll do it.

[@cmpunk8599]

Hey koushik bro, thank you very for your videos. They are really helpful. I was following this video to setup playwright framework using JavaScript but was facing multiple issues where I was not able to import objects or functions created in different JS files to my main test.js file. If possible can you please do a detailed video on how to create framework from scratch I mean along with import statements and how to call functions from other files to main test file? Also I’ve seen from one of your comments that you are working on BDD cucumber with playwright, can you please upload some video around it if possible? Thank you in advance koushik bro!

[@letcode]

To do the import you can refer the protractor playlist. I have covered those in detail. However I'll recommend to use typescript similar to js but added features are there..

[@debasisnath4558]

@@letcode how to do customer reports in framework using java script can you please take a session

[@letcode]

kzbin.info/www/bejne/ql6upHtrpZtjqc0si=Lrr_7WDLYqDMlIXx

[@AmitSaini-g1b]

Is designing a playwright framework with Javascript is challenging as compare to ts?

[@letcode]

Somewhat yes I will say.... Ts is easy and fun.

[@sreesai452]

Hi Koushik, I am building framework based your video and GIT repository. I configured azure build pipeline based on your video and trying to run the below cross-env script. It is working in local but it is not working in azure build pipeline. Could you please help how to run cross-env thing in azure dev pipeline. "test:singleqa": "cross-env CI=true test_env=qa npx playwright test 003_MyResources.test --project=Chrome",

[@letcode]

Hi, pls refer to this video kzbin.info/www/bejne/iHTdiah5qZ1_pMk

[@AliKhan-wm5lt]

Thank you somuch Akshay and Koushik. Your videos are very much useful. May I know if there is any dataprovider (like the one in TestNG) in this playwright. I basically want to understand how can we execute single testcase with multiple sets of data and see all details in the report. Also do you have cucumber framework?

[@letcode]

Hi, cucumber support is there, no straight forward strategy like data provider, but using loop we can run test for multiple data. I'll find a better approach for this and will make a video

[@AliKhan-wm5lt]

@@letcode Thank you so much for the quick reply.

[@akshaypramodpai7736]

kzbin.info/www/bejne/o5zEmXqsnJWtqbc

[@alikhanmohammad5920]

Hi @LetCode with Koushik , In my framework I get an error "Cannot use import statement outside a module”. Steps: 1. I’ve created a framework project in typescript, that consists of only utility classes & functions and published it to npm artifactory. 2. Then I've created a sample project in typescript in my local and added the above artifact as a dependency in my package.json. On running "npm install" it downloaded the artifact successfully inside node_modules. 3. Now while executing the feature files, I get the error “Cannot use import statement outside a module”. This error displaying in the console log is pointing to the utility classes at the places wherever import statements are written. My Understanding: Since the error is pointing to the utility classes, I think the script is able to import the class from the node_module but import is not working internal to the node_modules. That means importing one utility class from another class in same package inside the node_modules has some problem. When I changed the import statement to “require”, then the problem is solved, but wherever “type” is specified, I’m getting another error “unexpected token : colon”. So I’m totally confused. Could you please help.

[@letcode]

R u using eslint ?

[@alikhanmohammad5920]

@@letcode Yes, I'm using.. I mean, I have it in my package.json. When I run "npm install" it threw few compatibility issues with respect to eslint versions and so I ran with npm6. The command that I triggered is "npx -p npm@6 npm install" and from then onwards I did not see any errors related to eslint.

[@alikhanmohammad5920]

@@letcode Infact I removed the eslint dependencies and tried.. Still no luck

[@letcode]

Somehow u r comments are getting deleted, sorry for that. Colon might be because of eslint configuration. Regarding the node modules use I'm not sure bro.

[@alikhanmohammad5920]

@@letcode Thanks for the reply...Is it because of eslint configuration? Let me try it by deleting that dependency. Till now I was thinking that "let browser: ChromeBrowser" is throwing an error "unexpected : colon" so it could be because it's treating that as javascript file, instead of the typescript, and hence typesafety is not working.

[@prasadverma4794]

Hi Koushik, is it possible to connect to Database using playwright. If there is any option, please give some info on that. Thank you

[@letcode]

I beleive that is covered in this video itself 🤗

[@prasadverma4794]

Thanks Koushik. It's really helpful. I'll implement this in my POC. If possible can you make a video on how to configure cucumber framework in playwright.

[@letcode]

Coming soon 😊

[@AliKhan-wm5lt]

Hi Koushik/Akshay, Inside the framework wrapper methods, I see that we are waiting for the element to be visible before performing the actual action like click, fill text, etc. Since playwright already provides auto-waiting mechanism, why do we want to again wait for the element to be visible before calling the playwright click method, etc? Is there any reason for that?

[@akshaypramodpai7736]

Hi Ali. I am yet to change that. I will work on this previously thar was not he case so I had added it. Thanks for feedback

[@AliKhan-wm5lt]

@@akshaypramodpai7736 Thanks for the quick reply. Need one more clarification. Since this is a cucumber framework, we have used playwright, but not playwright test. So will all the features that are available in playwright test be available in playwright as well? Because I don't see a way to include soft assertions in this framework.

[@akshaypramodpai7736]

@@AliKhan-wm5lt I thinks it's reverse way in playwright test we get all features. We can just include playwright test.

[@AliKhan-wm5lt]

@@akshaypramodpai7736 Sure. thank you so much

[@karthic5231]

Koushik bro...Can you tell how to custom report after finished all test to send the report to stack holders in playwright via configuration...Like @Aftersuite i need to execute that send mail class after complete the overall test is finshed.in 1.16 version of playwright they give HTML report with lot of minimum and excellent option but it's immediate execute with out any extra work we do it...It's shows the report but I want to send the report where to config this i had the node mailer code its working in protractor well but I am not able to send after fished the testing its execute parellel is it any config shOuld i need for this ...Can you help me

[@letcode]

Sure I'll make a video on sharing report

[@karthic5231]

@@letcode hi now i am finished the send mail report using custom reporter bro.but in my organisation they dont need the default html reporter.i use the custom report for sending the attached email.its working fine now.i am fully new to javascript i did not no how to produced or created html report.in java i use string to add the html tag directly and using file option open and write the string variables to html file then i create my own html content in java script or type script.but how can we do it java script these things only i need to know Koushik bro..currently i am using playwright but reporter part i used default allure because its very less(3mb) in memory.

[@letcode]

OK bro I will try to make a video on this, but it might take a little time. meanwhile can u check this to share allure report kzbin.info/www/bejne/qnfcmXyXa6-KmLs

[@karthic5231]

@@letcode Thanks koushik bro.i already seen first the report sharing your video. then only i started your video to continue for choose the playwright.thanks for your video.its guide me lot.i will try to start my work with the combination of pupeeteer and protractor with playwright for configuration part then after to start framework with your video.i will try to make custom report for my company.once again thans @Koushik bro

[@akshaypramodpai7736]

Playwright 1.17 has emailable report feature do check it out

[@bhargavareddychintharedddy2101]

I'm sir akshay's framework, but I got a set back of before all code isn't running. Please help

[@letcode]

Hi, can you elaborate the issue?

[@СергійГуменюк-х1ж]

Hi Koushik Myabe it's not the right video under which this question should be asked but anyway) In Selenium frameworks it is considered to be a good practice when method(function) returns the next page object in case it's needed For example smth like this: public HomePage submitLogin() { driver.findElement(loginButtonLocator).submit(); return new HomePage(driver); } Can we use such "pattern" in TS, Playwright ? If yes, why you are not showing it? I would appreciate if you would show an example of such code in TS, Playwright Thanks in advance

[@letcode]

We don't do that because in async and await long Chaining is not possible. Before calling every method we have to use await right.

[@СергійГуменюк-х1ж]

@@letcode Oh, I see. I thought that "await" on the begining of chain will be used for all))

[@SuryaVeda]

Please enable quality, unable to see clearly

[@letcode]

Pls check your internet speed, all videos are in 1080p resolution.

[@bumbee556]

Thanks Akshay and Koushik, Thanks for the video to develop a framework.♥... Could you please help me with a video for a framework with Playwright, TypeScript and Cucumber?

[@letcode]

I'm not using cucumber yet, framework playlist is in progress.

[@AliKhan-wm5lt]

Hi Koushik/Akshay, May I know if it is possible to generate allure report in case of cucumber framework? Because I tried to generate but no luck so just wondering if it is really in place or not.

[@letcode]

I'm not sure, I don't see any official doc.

[@AliKhan-wm5lt]

@@letcode oops... In that case, I don't think people can go for the cucumber framework if they are really interested in the allure report. Can we log a defect for that in playwright?

[@letcode]

They are working on the cucumber release, so we can wait until that.

[@AliKhan-wm5lt]

@@letcode Sure thank you..

[@akshaypramodpai7736]

They are trying to include steps in playwright allure reports so no need for separate reporter in coming releases.

[@kapilkapoor7191]

Grt Job.

[@letcode]

Thanks 👍

[@divyanshusharma4792]

Its a great implementation of playwright capabilities within a single framework. Can anyone of you can create a framework using Cucumber BDD approach using playwright configurations only....that would be very helpful😊😊

[@letcode]

I'm working on it, will bring tutorial.

[@pavankumarshanbhag5452]

It's Akshay not pramod

[@letcode]

Yeah, sorry for that 😔