[HN Gopher] Playwright: Automate Chromium, WebKit and Firefox
       ___________________________________________________________________
        
       Playwright: Automate Chromium, WebKit and Firefox
        
       Author : cyrusmg
       Score  : 164 points
       Date   : 2022-01-26 08:12 UTC (1 days ago)
        
 (HTM) web link (github.com)
 (TXT) w3m dump (github.com)
        
       | brimstedt wrote:
       | Does anyone know how it compares to NightwatchJs?
       | 
       | Br
        
       | tw20212021 wrote:
       | Is there an open source web testing tool which also integrates a
       | dashboard, keeps track of test runs, creates reports, something
       | that I can just install on a vm and run to test a web app?
        
         | hoten wrote:
         | Give Lighthouse CI a shot.
         | 
         | https://github.com/GoogleChrome/lighthouse-ci
        
       | syspec wrote:
       | Interesting tidbit:
       | 
       | One of the main contributors of this project[0], was the core
       | contributor (creator?) of Puppeteer[1], but then I guess left
       | Google to join Microsoft and work on this[2][3].
       | 
       | [0] - https://github.com/aslushnikov
       | 
       | [1] - https://github.com/puppeteer/puppeteer/
       | 
       | [2] - https://github.com/microsoft/playwright/graphs/contributors
       | 
       | [3] - https://github.com/microsoft/playwright/graphs/contributors
        
         | vlunkr wrote:
         | I wonder what the story is there. Why wouldn't MS just have him
         | continue to work on Puppeteer? They're both open source, so
         | there's not much point in "owning" their own clone of it.
        
           | dzhiurgis wrote:
           | I'm exaggerating but Playwright vs Puppeteer is a bit like
           | comparing Puppeteer with Selenium
        
           | fikama wrote:
           | From what I know puppeter works only with chromium, this
           | could be deal breaker for microsoft
        
             | abraham wrote:
             | Puppeteer has experimental Firefox support.
             | 
             | https://pptr.dev/#faq:~:text=What%20is%20the%20status%20of%
             | 2...
        
             | jahewson wrote:
             | Edge is chromium though.
        
               | zamadatix wrote:
               | Microsoft's web products run on more than Edge.
        
       | ithrow wrote:
       | For generating PDFs like invoices in a webapp, is libraries like
       | this the way to go these days or is still using a pdf lib the
       | norm?
       | 
       | Pros of Playwright/Puppeteer:
       | 
       | Reuse existing HTML/CSS knowledge
       | 
       | Cons: Requires an external service or shelling out to an external
       | process
       | 
       | Pros of using a pdf lib:
       | 
       | Probably better performance, simpler architecture by being in-
       | process.
       | 
       | Cons: Ad-hoc language for designing the PDF.
        
         | [deleted]
        
         | rudasn wrote:
         | It's very simple to use either, there are loads of example
         | implementations on GitHub.
         | 
         | I used one based on docker, and the bottleneck was actually
         | sending the html, css you want to print (if it's not already
         | served over http). I used a shared docker volume to write to
         | from one process (python) and read from another (the node
         | pupetter).
         | 
         | It all comes down to, load html, wait to load, save to pdf.
         | Very simple, fast, and reliable. More so than weasyprint for
         | example.
        
       | robstain wrote:
       | Anyone tried BotCity?
       | 
       | https://botcity.dev
        
         | petermd wrote:
        
       | kundi wrote:
       | Does it support screencast - video recording of the browser with
       | audio?
        
         | mxschmitt wrote:
         | It supports video recording (without audio), screenshots, and
         | post mortem recording which is called Tracing.
        
       | hoten wrote:
       | Having worked with these folks back in Chrome, it's been great
       | seeing this project continue to be successful. Great job!
        
       | naasking wrote:
       | Anyone have experience with Playwright compared to Selenium? I
       | have a fairly large test suite and Selenium produces constant
       | false positive errors, typically due to various timeouts that
       | seem fundamentally unsolvable when running it from .NET. It's
       | just very finicky.
       | 
       | I don't know if it's Selenium specifically or some problem with
       | the .NET binding, but I figure Microsoft must have better .NET
       | integration so it will at least eliminate that possible source of
       | problems.
        
         | Bilal_io wrote:
         | I tried selenium then playwright for a .Net project, selenium
         | wasn't easy to work with. Playwright was good but for some
         | reason which I don't recall exactly (could have been because it
         | had to redownload chromium everytime we deployed). I ended up
         | switching to puppeteer and I ended up very happy with it.
        
         | simonw wrote:
         | On paper Playwright should be a LOT better - it's taken a
         | similar approach to Cypress, where everything is designed
         | around the need to reduce flaky tests.
         | 
         | In Playwright that manifests itself as the "auto-wait" feature:
         | https://playwright.dev/docs/actionability
         | 
         | You can do this kind of thing with Selenium too but it wasn't
         | designed in from the very start of that project.
        
         | tmcneal wrote:
         | I'm not sure if any of these are pertinent to your tests, but
         | these are the issues I see most often that cause flaky tests:
         | 
         | - Hard-coded waits in your code, like "Thread.sleep(1000)". A
         | better alternative is to replace hard-coded waits with
         | something that waits for an element or value to appear on the
         | page. i.e. click on a button and wait for a 'Success' message
         | to appear. Puppeteer and Playwright both have good constructs
         | for doing this.
         | 
         | - Needless complexity in the tests. Conditionals in particular
         | are a code-smell and indicate there's something needlessly
         | complex about the test.
         | 
         | - No test data management strategy. The more assumptions you
         | can make about the state of your application, the simpler your
         | tests become. Ideally tests are running in an environment that
         | nothing else is touching, and you're seeding data into that
         | environment before tests run. I personally don't believe in
         | mocking data in regression tests since that quickly becomes
         | hard to manage.
         | 
         | We spend a lot of time thinking about these issues at my
         | company and wrote a guide that covers other common regression
         | testing issues in more detail here:
         | https://reflect.run/regression-testing-guide/
        
           | naasking wrote:
           | > - Hard-coded waits in your code, like "Thread.sleep(1000)".
           | A better alternative is to replace hard-coded waits with
           | something that waits for an element or value to appear on the
           | page.
           | 
           | We don't do any timed waits, all of our waits are for an
           | element or value to appear, but these waits never complete
           | sometimes, non-deterministically. We then added a long 5 min
           | timeout on these waits because we know the test will never
           | complete at that point. It's always fine in manual testing
           | though, and if we don't run the browser in headless mode and
           | watch it work. Very frustrating.
           | 
           | Sometimes the HTTP requests themselves timeout after a few
           | minutes, but this never happens in manual testing either.
           | That's actually the most common issue these days, and this
           | happens non-deterministically too. This is what I meant by
           | "flaky".
        
         | mattlondon wrote:
         | I have had similar issues with selenium via other languages too
         | - it is generally pretty flaky. E.g. saying a button or some
         | other element doesn't exist when it clearly does.
         | 
         | With great care and effort you can make your tests reliable
         | (especially if you are happy to allow a "best of 3" type test
         | strategy to allow for 1 flake and 2 passes) though. Prodigious
         | use of the wait (i.e. stdlib polling) primitives seems to give
         | you the most bang for your buck.
         | 
         | I am note sure if this is just the nature of web automation, or
         | if selenium is just crap? My gut is to say it is selenium's
         | fault since we never get the same issues when using javascript
         | in the DOM or in an extension)...maybe it is the browser APIs I
         | guess? U have no idea but if this playwright is any better than
         | that would be superb.
        
         | i_like_apis wrote:
         | While I have not used Playwright (but have a lot of experience
         | with Se), I would say the code style is refreshing:
         | // Expect an element "to be visible".         await
         | expect(page.locator('text=Learn more').first()).toBeVisible();
         | 
         | Writing await for every action makes the timeout of the action
         | seem more explicitly declared. There seems to be more granular
         | control of timeouts as well https://playwright.dev/docs/test-
         | timeouts
         | 
         | > I don't know if it's Selenium specifically or some problem
         | with the .NET binding
         | 
         | If the execution in .NET is slow then I suppose it could be
         | .NET. But it could be (and often is) the suite design. You must
         | wait for /everything/ before interacting with it because the
         | code execution is quicker than the page.
         | 
         | Large Se/Webdriver suites are often a PIA. I find it's nice to
         | write them with Python or Ruby so they can be debugged
         | interactively with the an interactive shell.
        
           | naasking wrote:
           | > If the execution in .NET is slow then I suppose it could be
           | .NET. But it could be (and often is) the suite design. You
           | must wait for /everything/ before interacting with it
           | 
           | That's what I do, but the wait for an element in certain
           | tests times out after a few minutes, even though the elements
           | are clearly visible, and manual use never has an issue.
           | 
           | From other comments it sounds like Puppeteer and Playwright
           | are better on this, so will look into switching.
        
             | gmokki wrote:
             | When I fixed many similar selenium/webdriver tests the root
             | cause was always the same: You grab reference to an element
             | and for example wait it to become enabled or some text to
             | appear. But your ui framework actually replaces the element
             | in the dom while doing its thing and your reference to
             | stale element will never change. Fix is to loop searching
             | the element with selector and check if the element fills
             | the conditions. If not, retry from search again. We had
             | nice helpers for those and had very stable selenium tests.
        
         | londons_explore wrote:
         | I think it's possible to write tests in selinium which are
         | time-independant... Eg. "Wait for element #foo to exist".
         | 
         | You can also give the browser a virtual clock so that you can
         | use time based timeouts and give every test a timeout of 3
         | hours, but those 3 hours only take milliseconds in real time.
         | That approach gets CPU expensive if your site has any
         | background polling scripts or animation, because obviously the
         | animation will end up animating a lot during the test!
        
           | naasking wrote:
           | > I think it's possible to write tests in selinium which are
           | time-independant... Eg. "Wait for element #foo to exist".
           | 
           | Yes, this is what I've done but the elements non-
           | deterministically do or do not appear according to selenium,
           | and then the wait times out. This happens for dozens of tests
           | across dozens of pages with no issue with manual use, so
           | something fishy is going on.
        
       | apatheticonion wrote:
       | The only thing I wish we had was remote browser access - so I
       | could run my tests on a VM (like within a docker image) and use a
       | browser on the host.
       | 
       | We use TestCafe at work for this purpose. I personally hate
       | TestCafe as it's is an absurd unfocused mess of a browser remote,
       | but it lets me control my browser by navigating to a URL which no
       | other browser remote system does.
        
       | defied wrote:
       | I'm working on a project that provides remote browsers, running
       | on VMs/containers, capable of running Playwright tests (and
       | Puppeteer scripts): https://headlesstesting.com/
       | 
       | We've seen a consistent growth of interest in people wanting to
       | use Playwright for browser automation (and testing).
        
       | headlessvictim2 wrote:
       | Off-topic, but our freemium website is under attack by headless
       | browsers.
       | 
       | The freemium service provides access to compute-heavy machine
       | learning models running on GPUs.
       | 
       | Hackers blast 50-100 requests in the same second, which clog the
       | servers and block legitimate users.
       | 
       | We reported IPs to AWS and use Cloudflare "Super Bot Fight Mode"
       | to thwart attacks, but the hackers still break through.
       | 
       | We don't require accounts, but could impose account requirements
       | if this helps.
       | 
       | Any suggestions?
        
         | rabi_molar wrote:
         | Perhaps Captcha?
        
           | headlessvictim2 wrote:
           | Thanks for the suggestion.
           | 
           | It is possible, but this degrades the experience for
           | legitimate users.
           | 
           | We prefer solving this without impacting/taxing normal users
           | if possible.
        
         | slig wrote:
         | Just block the AWS ASN on CF, it's nor worth fighting.
        
           | rob-olmos wrote:
           | +1 and GCP, and many other hosting ASNs
        
         | forgotmyoldacc wrote:
         | Why not ReCAPTCHA?
        
           | headlessvictim2 wrote:
           | Thanks for the suggestion.
           | 
           | It is possible, but this degrades the experience for
           | legitimate users.
           | 
           | We prefer solving this without impacting/taxing normal users
           | if possible.
        
             | readyplayeremma wrote:
             | Just add the captcha only for requests coming from the
             | problematic ASNs, like AWS.
             | 
             | edit: Actually, since you use CF, just make a firewall rule
             | that forces the captcha for those ASNs before it even gets
             | to your app. They have a field named "ip.geoip.asnum" for
             | that, and an action called "challenge" which will force a
             | captcha.
        
         | [deleted]
        
         | synergy20 wrote:
         | what's your site? would like to play with it
        
         | cmeacham98 wrote:
         | 100 requests/second isn't that much, especially if you're
         | fronting your website with Cloudflare. Do you have some
         | unauthenticated endpoint(s) that eat up a ton of server CPU?
        
           | headlessvictim2 wrote:
           | Thanks for the reply!
           | 
           | The freemium service provides access to machine learning
           | models on GPU instances, served with FastAPI.
           | 
           | Each request invokes a compute-intensive ML model, but
           | perhaps there is something wrong with the FastAPI
           | configuration as well?
        
             | tempest_ wrote:
             | It could be.
             | 
             | I watch the FastAPI repos a lot and tones of people do not
             | understand how async python works and put their models with
             | sync code in an async context.
        
               | headlessvictim2 wrote:
               | Consider us one. :)
               | 
               | We tried removing "async" -- thinking it would force
               | sequential processing -- but it unexpectedly seemed to
               | cause parallel processing of requests, which caused CUDA
               | memory errors.
               | 
               | Before removing "async", this is the weird behavior we
               | observed:
               | 
               | * Hacker blasts 50-100 requests.
               | 
               | * Our ML model processes each request in normal time and
               | sequentially.
               | 
               | * But instead of returning individual responses
               | immediately, the server holds onto all responses --
               | sending responses only when the last request finishes (or
               | a bunch of requests finish).
               | 
               | * Normally, request 1 should return in N seconds, request
               | 2 in 2 _N seconds, but with this, all requests returned
               | in about N_ 50 seconds (assuming batch size of 50).
               | 
               | 1. Any suggestions on this?
               | 
               | 2. Mind clarifying how sync vs aync works? The FastAPI
               | docs are unclear.
               | 
               | Any help would be much appreciated.
               | 
               | This has been extremely frustrating.
        
               | azinman2 wrote:
               | What are the bots goals? Curious
        
         | austincheney wrote:
         | Browser automation will occur by executing events in the DOM or
         | by calling properties of the page/window. It's all JavaScript
         | designed for user interaction executed by a bot.
         | 
         | The one event that cannot be automated is cursor
         | movement/position. Put a check into your event handlers that
         | check that the cursor is actually over the event target.
        
           | darkstar999 wrote:
           | That sounds like an accessibility problem.
        
             | austincheney wrote:
             | Use an alternate control for keyboard navigation that is
             | visually hidden and is accessed only by tab focus.
        
           | headlessvictim2 wrote:
           | This is interesting. Thanks for sharing.
           | 
           | Are you saying block form submission unless the cursor is
           | over the event target?
           | 
           | If so:
           | 
           | * How to handle legitimate requests from mobile users?
           | 
           | * How to handle form submissions with the "return" key?
        
             | austincheney wrote:
             | Mobile users will use touch events instead of click events
             | and likely your interface will be different and the screen
             | width will be different. Check for these things along with
             | keywords from the user agent string to determine mobile
             | users from other users.
             | 
             | Return key on a control in a form will fire a submit event.
             | Check for cursor position in your submit handler.
        
       | forgotmyoldacc wrote:
       | Benefits of Playwright over Puppeteer - official support for
       | languages outside of JavaScript, and official codegen/record
       | support. Great!
        
       | vthommeret wrote:
       | Reposting my previous notes on Playwright
       | (https://news.ycombinator.com/item?id=30060135):
       | 
       | I just want to plug Playwright by Microsoft as I've been using it
       | over the past month and have had a really great experience with
       | it: https://playwright.dev It's built by the founders of
       | Puppeteer which came out of the Chrome team. Some things I like
       | about it:
       | 
       | 1. It's reliable and implements auto-waiting as described in the
       | article. You can use modern async/await syntax and it ensures
       | elements are a) attached to the DOM, visible, stable (not
       | animating), can receive events, and are enabled:
       | https://playwright.dev/docs/actionability
       | 
       | 2. It's fast -- It creates multiple processes and runs tests in
       | parallel, unlike e.g. Cypress.
       | 
       | 3. It's cross-browser -- supports Chrome, Safari, and Firefox
       | out-of-the-box. 4. The tracing tools are incredible, you can step
       | through the entire test execution and get a live DOM that you can
       | inspect with your browser's existing developer tools, see all
       | console.logs, etc...
       | 
       | 5. The developers and community are incredibly responsive. This
       | is one of the biggest ones -- issues are quickly responded to and
       | addressed often by the founders, pull requests are welcomed and
       | Slack is highly active and respectful.
       | 
       | My prior experience with end-to-end tests was that they were
       | highly buggy and unreliable and so Playwright was a welcome
       | surprise and inspired me to fully test all the variations of our
       | checkout flow.
        
         | [deleted]
        
       | johnnypangs wrote:
       | What do people thing of playwright vs cypress? I've been
       | considering using playwright instead as it supports more browsers
       | and I feel like it's easier to do production monitoring (by
       | putting it in a aws lambda or using checkly)
       | 
       | - Cypress: https://www.cypress.io
       | 
       | - Playwright aws lambda:
       | https://github.com/PauloGoncalvesBH/running-playwright-on-aw...
       | 
       | - Checkly: https://www.checklyhq.com
        
         | machiaweliczny wrote:
         | Playwright is definitely better IMO. Cypress is overengineered.
        
           | felipellrocha wrote:
           | I wouldn't say cypress is over engineered. Just a byproduct
           | of its time.
        
         | CSDude wrote:
         | - Cypress does not run on M1 natively.
         | 
         | - Playwright is more lightweight. Can be good or bad on what
         | you expect. But I definitely prefer Playwright.
        
         | cebert wrote:
         | On my team we evaluated Cypress and Playwright and landed on
         | Playwright. Some features it has that Cypress didn't was Safari
         | support, support for cross domain tests, and support for tests
         | that need to open multiple browser windows (for testing
         | collaborative editing).
        
         | cornedor wrote:
         | We recently picked playwright for a project because we could do
         | more with the "mouse". With playwight you can click coordinates
         | on the page. I did not find an easy way to do this using
         | cypress. Aside from that, playwright seems to be so much
         | faster.
        
         | tnolet wrote:
         | We see a strong adoption of Playwright. It's the default we
         | recommend to users now. We also support Puppeteer, but its
         | development is lagging.
         | 
         | Having said that, I would love to support Cypress if I had
         | infinite time and focus.
         | 
         | Side note: Selenium is not on the menu, even with its large
         | install base.
         | 
         | We are aiming for where the puck is going and it's going to
         | Playwright.
         | 
         | Full disclaimer: I'm CTO at Checkly.
        
           | hugs wrote:
           | Why was Selenium off the menu?
        
             | cebert wrote:
             | Selenium is slow and based on webdriver. I think most
             | consider it legacy at this point. Most new projects tend to
             | use Playwright, Cypress, or Puppeteer for E2E tests. All
             | three options are much more performant and reliable.
        
           | synergy20 wrote:
           | I saw puppeteer is actively developed, wonder where the
           | 'lagging' implies.
           | 
           | doesn't playwright use puppeteer for chromium-based
           | browsers(even edge-based), I thought it's just a wrapper for
           | puppeteer with extra support for firefox.
        
           | djbusby wrote:
           | The checkly folk recently published this
           | 
           | https://blog.checklyhq.com/cypress-vs-selenium-vs-
           | playwright...
           | 
           | Cypress vs Selenium vs Playwright vs Puppeteer speed
           | comparison
        
         | twohaibei wrote:
         | I highly recommend codeceptjs. After 4 years of using test cafe
         | for e2e testing, codecept has proven to be much more pleasant
         | to use.
        
         | dvngnt_ wrote:
         | I love Cypress. there are definitely limitations though like
         | iframe support or visiting two separate domains, tab support
         | 
         | https://docs.cypress.io/guides/references/trade-offs#Permane...
        
           | [deleted]
        
       | simonw wrote:
       | Electron appear to have dropped support for their previous
       | automated testing framework Spectron -
       | https://github.com/electron-userland/spectron/blob/master/RE... -
       | and now suggest Playwright as an alternative:
       | https://www.electronjs.org/docs/latest/tutorial/automated-te...
       | and https://playwright.dev/docs/api/class-electronapplication/
        
         | eatonphil wrote:
         | WebDriver or Playwright. I switched from Spectron to selenium-
         | webdriver.
        
       | Karupan wrote:
       | Playwright is great, especially if you are dealing with test
       | cases that span multiple domains/contexts. I had to test some
       | user flows which involved logging into two apps, each with three
       | different users to perform and validate various actions.
       | Playwright's context switching made it a breeze. Also, it offers
       | a nice separation of browser automation and test runner API, so
       | it can be used outside of E2E testing as well.
        
       ___________________________________________________________________
       (page generated 2022-01-27 23:00 UTC)