Hooks & Screenshots | Playwright & Cucumber - Typescript | Part 4

[@goon7829]

Great series bro….. one more cool thing is u accept the things if its not working out that soo honest way keep rolling God speed with u 👍

[@letcode]

Thanks and welcome 🤗

[@sravanthichowdary6996]

Hi Koushik, thank you for this series. How to attach screenshot to afterstep for scenarioOutline?

[@letcode]

It is covered in the report video.

[@FranciscoCampos00]

Do you know how to do assertions with screenshots while using Playwright and Cucumber? Seems like the toHaveScreenshot() does not work outside of the playwrights' test scope... I'm wondering if there is any other way to do this...

[@letcode]

Screenshot assertion will not here as that is part of test runner.

[@MohamedGHEMID]

thank you for your video :) I'm not able to mock api with cucumber and playwright ! do you have a solutin for this ?

[@letcode]

Can u try this kzbin.info/www/bejne/mWjddIRue7CcnpYsi=W6ned8F5B7IJ6KHy

[@MohamedGHEMID]

@@letcode Thank you ! but this only work with palywright "test" function ! it doesn't work with `given/when/then` cucumber :(

[@letcode]

@MohamedGHEMID within the given function you can use the same code. To get the request you can use page.rwquest

[@MohamedGHEMID]

@@letcode my bad ! I was using MSW to mock my API ! and service workers are incompatible with playwright :) The solution is to block service workers and use only the mock solution proposed by playwright :)

[@ashishgupta1191]

Hi Koushik , Thank you for making this series. I could not find the video for trace viewer ,video creation with playwright cucumber. Can you please help me with the video link ?

[@letcode]

Video attachment is available on the report video. Trace i have to add a video.

[@ashishgupta1191]

@@letcode Thanks Koushik for sharing the details , actually I am doing a POC and hence needed to showcase the traceviewer implementation as well. A quick code snippet with guidelines will also help here. Thank you in advance

[@letcode]

If possible I'll update the GitHub code.

[@ashishgupta1191]

@@letcode Thank You Koushik

[@letcode]

I have updated the repo.

[@pranitdhole5978]

Hi, can we attach video for failed tests ? How to handle the code in javascript

[@letcode]

I have a video, could you please check the playlist

[@pranitdhole5978]

I have checked this playlist. But didn't get it in any video of this playlist

[@letcode]

kzbin.info/www/bejne/Y4iwYYSwltxnsMksi=n-um_tdm0bQaGZZT

[@pranitdhole5978]

Thanks, I'll try to implement the same in my project.

[@keplervelasco1854]

these tutorials are great!! thank you!

[@letcode]

Glad u like it 😊

[@ShijithKannoth]

Do you have any example of API testing using Playwright and Cucumber with typescript ??

[@letcode]

Not yet 😕

[@GalfanoIl]

Do you know how I can do the same in the report, but not with screenshots, but with API consumptions with the "request" function? I want to be able to print the information of the requests that are made in the tests of my API's

[@letcode]

Yes it is possible, but I have to take a look.

[@AdityaKumar-i9n]

Hi Koushik :- I want to run my test case in different browser how we can run that ( If i have to control like some times want to run all test cases in chrome, and vice versa, could you please guide me how to do that

[@letcode]

hi, continue with the playlist. I have covered those scenarios

[@ZaiPrzeciw-qi8vv]

Hey Koushik! First of all, thank you very much for fantastic courses! You are doing great work and you explain everything really well :) I have one problem though and probably you are the right person to help me. I have a project with Playwright, CucumbeJS + LambdaTest. When I set up my browser in BeforeAll() method, in LambdaTest test name is in fact a Session ID instead of scenario name. If I want to have scenario name visible in LambdaTest, I need to initialise the browser in Before() method. But that means I'm creating new instance of the browser with every scenario, which is a bit inefficient. Do you know how to handle it? So to sum up. Using Playwright, CucumberJS and LambdaTest I want to have scenario names visible in LambdaTest. Are you able to help?

[@letcode]

Yes, i can. I'll check with the lambda test team.

[@ZaiPrzeciw-qi8vv]

@@letcode Perfect! Thank you :)

[@Inchess1]

@@letcode Hey :) Did you maybe get some answer from LambdaTest?

[@letcode]

@@Inchess1 not yet, i have reproduce and ask them. Probably by this weekend.

[@letcode]

Hi, I got information from LambdaTest. I wanted to provide you with an update regarding the execution of BDD Cucumber tests on LambdaTest and the reporting on the dashboard. Currently, when running BDD Cucumber tests on LambdaTest, a single test session is created for a feature file, and all the scenarios within that file are executed sequentially in that session. As a result, the status of individual scenarios and their names are not displayed separately on the dashboard. We understand the importance of granular reporting for your test scenarios, and I am pleased to inform you that testcase level reporting is already on our roadmap. Our development team is actively working on this feature, and it will be available in the coming quarters. Hope it helps!

[@asdfauiuhasduhfpaiuduy2]

Any ideas on how we can bypass SSO in the GitHub cloud machine? Locally we could easily do that for the first time and then it works without it

[@letcode]

Not sure, haven't experienced it..

[@KavyashreeVijayakumar]

Hi, After using BeforeAll and AfterAll hooks, I am getting blank page for the second the scenario. Could you explain how to fix this ?

[@letcode]

Hi, check if the declaration and initialisation is done properly.

[@KavyashreeVijayakumar]

Yes, I followed the same steps which you have showed in the video.

[@sagarchaudhari9143]

Browser.newcontext is the code. which is opening new page again and again you just need to check condition if it is first launch or not if first launch run the code from second launch don’t runthat code

[@liqqie]

Could it not be related to the screenshot that the cucumber scenario name is the same in both runs? So the first one got created, and when the second one is done... the filename has been overwritten? Maybe if you add an timestamp we would be sure :)

[@letcode]

Hmm. U can also use the scenario id which will be unique always.

[@rajath7180]

@@letcode yes working with timestamp and the id,and make sure you click the usernames one by one in report ,to see both the screenshots

[@MohamedKhlifi-b3q]

I tried with this.attach but I didn't get the screenshot as an attachment in the xml file (junit). Any help?

[@letcode]

Attachment will be visible only in the html file

[@MohamedKhlifi-b3q]

@@letcode I did this in cucumber.json "format": [ "progress-bar", "html:test-results/cucumber-report.html", "json:test-results/cucumber-report.json", "junit:test-results/cucumber-report.xml:alwaysGenerateReport= true" ] I got an xml file, but it lacks the screenshot to be attached. I need it to be attached there. Something like this: [[ATTACHMENT|/path/to/some/file]] This is to view JUnit screenshots on GitLab or something else. It's necessary to me. Can you help?

[@FlaviusComan-o6h]

what is the name of vs code extension you use to show you your past actions?

[@letcode]

If u mean the GitHub commit then it is git lens

[@sagarchaudhari9143]

Hi if we write context.newpage in before methord it will again and again launch browser with blank screen after every new feature classs, I don’t want this , I want new page should be handled in features step class how to achieve this ? Currently facing issue like after 1 script run in next feature steps it will again launch browser with empty page without url ( I need to continue with previous page only no need to open new page )

[@letcode]

We cannot share the context of page from one scenario to another scenario.

[@shahwarfathima937]

this.attach() is not a function error is displayed, how to solve this

[@letcode]

I hope u r using the normal function and not the arrow function

[@SathishKumar-dc4dp]

Hi bro. Tosca Automation tool related oru tutorial start pannuga....

[@letcode]

If it's open source then i will start bro .

[@sivaramakrishnareddyrajula9605]

How to run single scenario from feature file?(as like we do in IntelliJ --> Right Click---> Run Scenario)

[@letcode]

Unfortunately we don't have that option in vs code. However u can use tags to run a particular scenario.

[@rishukumar7586]

these tests on deployed sites are fine but we have to do when you have to test ui with mock the api responses and then validate the ui results during ci pipeline we call such tests as acceptance tests

[@letcode]

You can perform mocking using playwright and can be combined with BDD

[@rishukumar7586]

@@letcode can we have a video of that as well?

[@letcode]

I have a mocking video separately You can use that.

[@riyazcommits7030]

@@letcode its great help you are providing to us . i really wanted to thank you for this , can you please provide the playlist related to mocking please??

[@letcode]

kzbin.info/www/bejne/mWjddIRue7CcnpYsi=huLL76bNXvQkKZKH

[@satishpolisetty4217]

Hi Koushik, Gone through the framework you created for Playwright,Typescript ,Cucumber and I want to run the tests not in 'incogntio' mode.How can I accomdate that in the framework? This is the invoke method from the framework. export const invokeBrowser = () => { const browserType = process.env.npm_config_BROWSER || "chrome"; switch (browserType) { case "chrome": return chromium.launch(options); case "firefox": return firefox.launch(options); case "webkit": return webkit.launch(options); default: throw new Error("Please set the proper browser!") } and this is the call: BeforeAll(async function () { getEnv(); browser = await invokeBrowser(); });

[@letcode]

By default it runs in incognito mode only, not sure if there is a way to change that.

[@rikki7663]

getting error TypeError: this.attach is not a function

[@letcode]

What cucumber version u have?

[@feeroz4u]

@@letcode The latest version .

[@blecomp]

Hello again my friend, when I run the project Shows this : Couldn't display img/jpeg attachment because the media type is unsupported. The same for PNG

[@blecomp]

I saw my error image is te correct. Thanks friend

[@letcode]

👍

[@pucvala6020]

Thank you

[@letcode]

Welcome 😄🤗

[@debasisnath4558]

Unable to import pickle

[@letcode]

Is the package added as the version I used?

[@debasisnath4558]

Yes it is working now it was due to wrong import annotation

[@RajaSharma-dn6od]

How to manage "projects" in default... and integrate with hooks ? example : I have this : const { devices } = require('@playwright/test'); module.exports = { default: { paths: [ "tests/features/**/*.feature" ], publishQuiet: true, dryRun: false, require: [ "tests/stepDefinitions/*.js", "./cucumber-start.js" ], parallel: 10, format: [ "junit:reports/report.xml", "json:reports/report.json" ], projects:[ { name: 'chromium', use: { ...devices['Desktop Chrome']} }, { name: 'firefox', use: { ...devices['Desktop Firefox']} } ] } }; i have another .js file which has the hooks ... const { Before, BeforeAll, AfterAll, After, setDefaultTimeout, AfterEach, defineParameterType, setWorldConstructor } = require("@cucumber/cucumber"); const { chromium, webkit, devices } = require('@playwright/test'); require('dotenv').config() console.log ("AM I GETTING HERE"); setDefaultTimeout(600000); // Automation Run options let options = { headless: false, slowMo: 2000 }; // launch the browser BeforeAll(async function () { global.browser = await chromium.launch({ headless: true, slowMo: 4000, }); console.log("BEFOREALL starting browser") }); // Create a new browser context and page per scenario Before( async function () { global.context = await global.browser.newContext(); global.page = await global.context.newPage(); console.log("BEFORE new browser") }); // Cleanup after each scenario After(async function ({ result }) { const currentTime = Date.now(); if (result.status === 'FAILED') { const screenshotPath = './screenshots/' + currentTime + '.png'; await global.page.screenshot({ path: screenshotPath }); console.log('Screenshot captured: ' + screenshotPath); } await global.page.close(); await global.context.close(); console.log("AFTER cleanup and close browser") }); // close the browser AfterAll(async function () { await global.browser.close(); console.log("AFTERALL closing browser") }); As you can see, it is saying chromium.launch(). How to change it so the hooks are executing based on the "projects" setup in the config file ?

[@letcode]

I'll look into it. Not getting any idea now.

[@danielkovacs3664]

Hi Koushik, This is my afterall: After(async function ({ pickle, result }) { console.log(result?.status) let videoPath: string; let img: Buffer; if (result?.status == Status.FAILED) { img = await pageFixture.page.screenshot({ path: `./test-results/screenshots/${pickle.name}.png`, type: "png" }) } await this.attach("just some text attached") await this.attach(img, "image/png") pageFixture.page.close() context.close(); }); my response: × After # tests\bddt\src\hooks\hooks.ts:25 Error: Invalid attachment data: must be a buffer, readable stream, or string but if i write the if statement to this: if (result?.status == Status.PASSED) { everything pass without error what was happen?

[@letcode]

Irrespective of pass or fail, attachment should work properly. I guess in line number 25, attachment type is wrong. Check the GitHub code

[@danielkovacs3664]

​@@letcode it was my mistake, i wrote tje attach outside the if:S if (result.status != Status.FAILED) { img = await pageFixture.page.screenshot({ path: `./test-results/screenshots/${pickle.name}.jpeg`, type: "jpeg" }) this.attach(img, "image/jpeg") } so now is OK after the series i am buying a coffee:) (love the videos)

[@letcode]

Great 👍