Frontent Testing Framework
Do you know anything interesting for testing Frontend?
I'm mainly looking for something for Visual Regression Test, something that will allow me to test given URLs and see what changes have occurred on a particular page after changes in the code.
In the sense that I take screenshots of 20 pages before the changes,
then I commit the changes, run an automated test and it shows me the differences in the screenshots (if there are any).
BrowserStack and Percy are too expensive.
I checked PlayWright, but it has problems with cookies and logging in.
I was thinking about Jest..., or Puppeteer. BackstopJS also seems interesting.
Maybe some of you can share your experiences?
Solution:Jump to solution
This is a guess, but something I've seen before is that the event handler for forms (like login) will expect inputs to get/lose focus, or otherwise receive events that playwright injecting values will not trigger. Personally, if you can do a login by hand and watch for the ajax call, it'd probably be easier to just do the login API directly and not bother with the login screen.
7 Replies
I'd be curious what kinds of cookie/auth issues you had in playwright, as that's what I would have recommended as I skimmed what you wrote.
Applitools Eyes might also be worth a look.
Maybe i misconfigured the Playwright Script, but it couldn't click the buttons.
Tried also Cookie / Session Storage trick, but it didn't worked either.
Hmm, maybe the state was missing:
Solution
This is a guess, but something I've seen before is that the event handler for forms (like login) will expect inputs to get/lose focus, or otherwise receive events that playwright injecting values will not trigger. Personally, if you can do a login by hand and watch for the ajax call, it'd probably be easier to just do the login API directly and not bother with the login screen.
It also might be worthwhile to add assertions in between each page.fill to ensure the input actually gets the values you want it to. Not necessarily useful for your intended test, but could be helpfull with debugging your login subroutine.
EG:
Thanks! Going to try it out 🙂
If you can and you haven't already, I highly recommend utilizing the built-in report from playwright via 'npx playwright show-report'. Playwright trace files are awesome for seeing exactly what happened in your tests.
Thanks for the help!
It worked using extra page.waitForTimeout(2000) and page.waitForSelector(mySelector, { state: 'visible'})
Used also your locator approach with locator and fill. Worked like a charm 🙂