ji..can you tell how to test charIQ data test or chart like data...can we use this Visual comparison or any other method for suggest to test the Chart related data.how to test tool tip data in playwright using sample data from chartiq
I have a question regarding visual comparison. When conducting visual comparisons on my local machine, the screenshots are saved with the format '-win32.png.' However, when I execute the tests through a Continuous Integration (CI) environment, the system attempts to match the screenshots using the name '-linux.png.' How can I resolve this discrepancy and prevent this error?
Playwright stores the screenshots in local for visual comparison. Do we have any way to share those test results with others ? Like how Percy does hosting the test results in an URL.
Hello @letcode, thanks for the tutorial. I am trying to run these visual tests in Github actions but those are failing due to different OS. How can we execute visual tests in CI like Git hub actions?
I am facing issue, the visual qa tests fails due to different resolution. Sometimes the snapshot is taken with different resolution by playwright and testcase flakiness is observed. Any help??
@letcode I need to take ss from figma design and compare that SS against the actual site...is that possible?? I tried taking ss from figma but it's not taking full page image... even tried changing the port size. Any suggestions will be great help
Can we perform such visual comparison for different devices or resolutions? Suppose we have Amazon site Chrome snapshot and I want to check the same for Android, IOS etc, will it be helpful in such scenarios?
so image i have about 20 test and within those i have 10 pages that i want to update, is there any other way apart from having to individually update each tests image?, because am guessing if i pass the update command all base images will be updated and a wrong image can get updated
Unfortunately, neither the documentation nor this video course provide an understanding for the quote: >Apart from screenshots, expect(value).toMatchSnapshot(snapshotName) can also be used to compare text, png and jpeg images, or arbitrary binary data.< Could you please explain how to compare a pic - resource on page for which I've got locator?
Hi Sir Actually I'm facing issue with visual comparison for the image taken .the image taken in full page screenshot while comparing its taking only the half of the taken full page screenshot.can you please help me on this
@@letcode yes sir it's comparing the visible portion ..how about the full page screenshot ? Can you please make some example session for the same ..please sir
@@letcode hello I found the reason. If the generated images are not from same resolution then even if the test fails, diff iamge won't generate. It is important to have actual and excepted image from same resolution inorder to generate a diff file.
awesome that's freaking cool 😁👍 is it possible to do like SeleniumBase, to compare the layout and not pixel by pixel so to be able to see the html tags, attributes or values differences, it's more reliable on certain cases. thanks
the concept works fine in local machines. but failed in CI as the file name generated is different (the tests runs in different machines). have anyone tried in CI?
Thanks kaushik because i search several thing about the scenario i already asked one video about the randomly changed data like temprature or price changed every sec is achieved by this visual comparisons i think so..i will try it while create the framwework with this concept.
Koushik can you guide me how to do visual regression testing with playwright + cucumebr +typescript as expect(page).toHaveScreenshot() or expect(value).toMatchSnapshot(snapshotName) is only compatible with playwright test runner. When i am using thsi with (Given,When,Then) stepdefinitions i am getting below error Error: toMatchSnapshot() must be called during the test
Github actions fails, because the filename has 'darwin' in it. So tried as fileName-chromium.linux.png instead of darwin. Now github actions recognises it, but it fails to compare even the valid screenshot (Reason is, the screenshot present in github was not actually taken from linux, but was taken from mac and later it was renamed as fileName-chromium.linux.png.) Any thoughts on how to run visual comparion on github actions?
Hello 👋
ji..can you tell how to test charIQ data test or chart like data...can we use this Visual comparison or any other method for suggest to test the Chart related data.how to test tool tip data in playwright using sample data from chartiq
Visual comparison might be not a good option as the data will keep changing.
I will look into this
amazing bro. keep up ur good work
I have a question regarding visual comparison. When conducting visual comparisons on my local machine, the screenshots are saved with the format '-win32.png.' However, when I execute the tests through a Continuous Integration (CI) environment, the system attempts to match the screenshots using the name '-linux.png.' How can I resolve this discrepancy and prevent this error?
Not sure.
Did you manage to figure this out?
@@danielstoicamusic yes bro, you need to create autofixture to remove snapshot suffix
Is best practice to automate UI design? Or should we focus more on functionalities and behaviors?
Functional tests are more important, UI tests are good to have.
Playwright stores the screenshots in local for visual comparison. Do we have any way to share those test results with others ? Like how Percy does hosting the test results in an URL.
You can share the html report which will have the compared images.
@@letcode will it show the same way like it shows in the localhost with the slider etc. ?
@@joyanupam1983 yes
@@letcode Ok, and while sharing the HTML report, we need to share the "Data" folder as well ?
@@joyanupam1983 yes correct
Hello @letcode, thanks for the tutorial. I am trying to run these visual tests in Github actions but those are failing due to different OS. How can we execute visual tests in CI like Git hub actions?
Not sure, i have to crack.
I am facing issue, the visual qa tests fails due to different resolution. Sometimes the snapshot is taken with different resolution by playwright and testcase flakiness is observed. Any help??
Yes, you have to set the viewport so that browser & screenshot will have the same resolution
@letcode
I need to take ss from figma design and compare that SS against the actual site...is that possible??
I tried taking ss from figma but it's not taking full page image... even tried changing the port size.
Any suggestions will be great help
I'm not sure if that's possible
Can we perform such visual comparison for different devices or resolutions? Suppose we have Amazon site Chrome snapshot and I want to check the same for Android, IOS etc, will it be helpful in such scenarios?
No, as the device resolution will change.
This is basically like previous and next run for the same device.
@@letcode Ok, any other tool that you can suggest in such scenario that can be helpful
Applitools is there, but it is paid version.
I heard of it not used personally.
@@letcode Ok. also can we use same image as reference image for different OS?
No I guess as the resolution might get changed.
so image i have about 20 test and within those i have 10 pages that i want to update, is there any other way apart from having to individually update each tests image?, because am guessing if i pass the update command all base images will be updated and a wrong image can get updated
I'm not sure which one will be a better approach. I don't use this option that much as my UI is dynamic.
Unfortunately, neither the documentation nor this video course provide an understanding for the quote:
>Apart from screenshots, expect(value).toMatchSnapshot(snapshotName) can also be used to compare text, png and jpeg images, or arbitrary binary data.<
Could you please explain how to compare a pic - resource on page for which I've got locator?
Hey Nick.
I have to check the documentation again,.
I'll get back to your question.
Hi Kousik , How to fixes pixel issue. in 1st execution Iam getting some pixel which is vary from 2nd execution.
Hi, there is an option maxDiffPixels
You can use this.
Hi Sir
Actually I'm facing issue with visual comparison for the image taken .the image taken in full page screenshot while comparing its taking only the half of the taken full page screenshot.can you please help me on this
I'm not sure about it, as per my understanding it will compare the visible portion.
@@letcode yes sir it's comparing the visible portion ..how about the full page screenshot ? Can you please make some example session for the same ..please sir
@@mychoice2559 yeah I'll check
@@letcode thanks sir
Brother pls provide a video to input the test data from Excel or XML. How to pass test data in a iterative way
Ok bro sure.
Very cool.
Hi sir for me comparison is failing but diff file not getting generated
Hi, i haven't used it for a while, maybe something has changed in the recent version.
@@letcode hello I found the reason. If the generated images are not from same resolution then even if the test fails, diff iamge won't generate.
It is important to have actual and excepted image from same resolution inorder to generate a diff file.
@@bilalroshanTESR great thanks
awesome that's freaking cool 😁👍
is it possible to do like SeleniumBase, to compare the layout and not pixel by pixel so to be able to see the html tags, attributes or values differences, it's more reliable on certain cases. thanks
For selenium, we can use applitools but that is paid.
@@letcode yep I know this one but I'm talking about the open source project SeleniumBase and his visual regression tool 😁
Oh is it so, can u share link I will check. Not sure about it.
Yes you can also compare dom text according to the docs
Yes, text, binary files.
the concept works fine in local machines. but failed in CI as the file name generated is different (the tests runs in different machines). have anyone tried in CI?
Yes, right. But there will be a way to handle it i guess
@@letcode Found any solution?
Playwright is not able to comapre Pdf ,how can we go around this?
This is behind the scope of Playwright, there might be some other library that can compare pdf.
Thanks kaushik because i search several thing about the scenario i already asked one video about the randomly changed data like temprature or price changed every sec is achieved by this visual comparisons i think so..i will try it while create the framwework with this concept.
this can only be achieved if the data remains the same or we ignore some parts of the web page while comparing ss
Only a few pixels can be ignored.
Great video and please do ci cd integration with playwright too
Sure 😃
Hi koushik
Very informative video
Can you please tell me what can we do for dynamic page, not to fail at the first time as well
Hi, i don't think that is possible, because first image needs to be captured by playwright only.
We cannot use the existing image.
Does it work with cucumber(BDD) ?
No
Nice one Koushik. Can you please do the same using Jest-Playwright? Thanks
This feature is available only in playwright test runner.
Koushik can you guide me how to do visual regression testing with playwright + cucumebr +typescript as expect(page).toHaveScreenshot() or expect(value).toMatchSnapshot(snapshotName) is only compatible with playwright test runner. When i am using thsi with (Given,When,Then) stepdefinitions i am getting below error
Error: toMatchSnapshot() must be called during the test
Github actions fails, because the filename has 'darwin' in it. So tried as fileName-chromium.linux.png instead of darwin. Now github actions recognises it, but it fails to compare even the valid screenshot (Reason is, the screenshot present in github was not actually taken from linux, but was taken from mac and later it was renamed as fileName-chromium.linux.png.)
Any thoughts on how to run visual comparion on github actions?
Hi, I'm not sure about it. I haven't used visual comparison in CI.
Did you manage to figure it out?