--- title: Our experience with Playwright | &‌amp description: "In our latest blog post, the authors share their journey: Why Playwright was the perfect choice and how it helped us establish confidence in our code quickly." image: https://miro.medium.com/v2/resize:fit:1400/1*JOD3XGILYm0Igru9LWgMOQ.jpeg --- [Skip to content](https://insights.andamp.io/blog/our-experience-with-playwright#main-content) [![andamp logo black (ampersand symbol)](https://insights.andamp.io/hubfs/logo_black.svg "andamp logo black (ampersand symbol)")](https://insights.andamp.io/?hsLang=en) - [About Us](https://insights.andamp.io/about-us) - [Career](https://insights.andamp.io/career) - [Code of Conduct](https://insights.andamp.io/code-of-conduct) - [Blog](https://insights.andamp.io/blog) # Our experience with Playwright [![](https://insights.andamp.io/hubfs/andamp-10-Zsolt%20MARTON-WEB.jpg)](https://insights.andamp.io/blog/author/martin-schwarz) [Martin Schwarz](https://insights.andamp.io/blog/author/martin-schwarz) 10. Dezember 2025 ![](https://miro.medium.com/v2/resize:fit:1400/1*JOD3XGILYm0Igru9LWgMOQ.jpeg) Photo by Maria Tevena on [Unsplash](https://unsplash.com/photos/a-large-group-of-multicolored-squares-of-varying-sizes-7FmSYQ3Z7fg) Have you ever taken over a project with just two months to make it production-ready and no end-to-end testbase? We recently had the chance to work on FUNDify, an online platform designed to share information about funding opportunities across Austria (which is actually open source, so feel free to check it out!). When we joined FUNDify, frontend end-to-end test coverage was non-existent. So what do you do in this situation? You don’t want to spend too much time — time you need for adding new features — writing every test by hand just to cover all key UI flows of the existing functionality. Still, you need a solid test base to ensure your changes and new features don’t break anything along the way. So, of course, you start looking for a testing framework that’s fast to set up, easy to use, and that offers features helping you establish a solid base of tests quickly. That’s when we decided to try out [Playwright](https://playwright.dev/), a framework that seemed to tick all the boxes. **Why we chose Playwright** First of all, Playwright just looked very straightforward and intuitive to use, lowering the entry barrier for developers new to E2E testing. But most importantly, it offered a way to quickly build a solid base of tests by providing tools to generate E2E tests efficiently. **Test Generator** Instead of writing every test step manually, Playwright comes out of the box with a test generator that lets you record your actions directly in the browser — by clicking buttons, filling out forms, navigating pages — and it automatically generates the corresponding test code. This speeds up test creation and allows you to focus on refining and extending your test suite. **How we used Playwright at FUNDify** **Getting started** Setting up Playwright for an Angular project like FUNDify’s frontend turned out to be straightforward and fast. Since our goal was to add end-to-end testing to an already existing frontend codebase, we wanted a setup that was lightweight, easy to maintain, and didn’t require major structural changes. Playwright offers a ready-to-use test runner and integrates seamlessly into most modern frontend stacks. In our case, all we had to do was install the latest version of Playwright via the CLI and let it handle the initial configuration for us: ``` # Install Playwrightnpm init playwright@latest ``` This command automatically sets up the test directory structure, installs the necessary browserdependencies, and generates a default configuration file, *playwright.config.ts*. It even includes optional example tests that you can run immediately, giving you a working baseline to start from. **Running the first test** Once Playwright is set up, running the tests is straightforward. In a local development environment, you can simply use the CLI commands: ``` # Run all testsnpx playwright test ``` **Our Configuration** To adjust Playwright to our specific workflow, we customised the generated configuration file. Here’s a simplified version of our setup: ``` export default defineConfig({ testDir: './e2e', fullyParallel: true, reporter: 'html', use: { baseURL: process.env['PLAYWRIGHT_TEST_BASE_URL'] ?? 'http://localhost:4200', },}); ``` This configuration ensures: - **Parallel execution**: All tests, including those within the same test file, run in parallel locally, significantly improving test performance. - **Detailed report**: An HTML test report is generated, providing an interactive overview of all test results, including screenshots and traces for easier debugging. Running the following command in your terminal opens the latest test report in your browser, allowing you to view the trace of all your tests: ``` # Show the latest test reportnpx playwright show-report ``` ![](https://miro.medium.com/v2/resize:fit:1400/1*VztFmmqkaSWOEBAxezfzTg.png) HTML report of your latest test run - **Dynamic baseURL:** The baseURL can be configured dynamically for local development, staging, or CI environments, making tests flexible and environment-agnostic. By default, Angular runs on http://localhost:4200. **Generating tests for FUNDify** Once Playwright was fully set up, writing and running tests quickly became part of our daily workflow. To make this process as smooth as possible, we added two custom scripts to our package.json: ``` scripts: { "test:e2e-ui": "npx playwright test --ui", "test:e2e-generate": "npx playwright codegen localhost:4200/ --viewport-size='1920,1080' --load-storage='e2e/config/.auth/funder.json'"} ``` The first command, *test:e2e-ui*, launches Playwright’s interactive test runner. It opens a visual interface where you can browse all available tests, run them individually, and inspect detailed logs, screenshots, and videos. This is especially useful during development or debugging — you can instantly see what went wrong without digging through console output. ![](https://miro.medium.com/v2/resize:fit:1400/1*eNlypHIeLD7lCtIvk0KWZg.png) Playwright’s visual interface for running E2E tests The second command, test:e2e-generate, uses Playwright’s Code Generator to record user interactions and automatically generate test code. It opens your application and captures every click, form input, and navigation you perform in the browser. The *--viewport-size* option resizes the browser window to the specified dimensions, providing a more realistic and user-friendly testing environment. With the *--load-storage *option, we preload the authentication state, so tests can be generated directly from an already logged-in session. In our case, *funder.json* contains all the necessary data, such as cookies and local storage tokens, required to establish a complete and valid storage state for that specific user. With these two scripts together, we were able to make creating new E2E tests much more efficient. They allowed us to build a stable test base for FUNDify’s most critical user flows. ![](https://miro.medium.com/v2/resize:fit:1400/1*8bE3yXURhwJlzA6iX2XsPw.png) Playwright’s interactive test generator ![](https://miro.medium.com/v2/resize:fit:1400/1*7B_Kg_sokQiFN8F_bMCt7A.png) Playwright’s test inspector recording live code **Should you try out Playwright?** Taking over a project with no E2E test coverage can be very frustrating. Fortunately, Playwright provides a powerful set of tools to bridge that gap quickly. So to answer that question: **Yes**, absolutely! Give it a try in your next (or current) project. With just a bit of practice and minimal configuration for your needs, you’ll be able to set up reliable E2E tests and start building your application with confidence in no time. And make sure to check out Playwrights official [documentation](https://playwright.dev/docs/intro). You can do so much more than what is covered in this post. [Web Development](https://insights.andamp.io/blog/tag/web-development) [Playwright](https://insights.andamp.io/blog/tag/playwright) [E2ETesting](https://insights.andamp.io/blog/tag/e2etesting) [Open Source](https://insights.andamp.io/blog/tag/open-source) ## Read On [![Why We Chose CDKTF Over HCL for Our Infrastructure](https://miro.medium.com/v2/resize:fit:700/1*oCrShpkC0v0AJ9ijBEswAQ.jpeg)](https://insights.andamp.io/blog/why-we-chose-cloud-development-kit-for-terraform-over-hashicorp-configuration-language-for-our-infrastructure?hsLang=en) ### [Why We Chose Cloud Development Kit for Terraform Over HashiCorp Configuration Language for Our Infrastructure](https://insights.andamp.io/blog/why-we-chose-cloud-development-kit-for-terraform-over-hashicorp-configuration-language-for-our-infrastructure?hsLang=en) In this blog post, the author breaks down the challenges with HCL, why CDKTF’s programming-language flexibility was a game-changer, and how it’s helping us build a more scalable, maintainable infrastructure. [![](https://miro.medium.com/v2/resize:fit:1400/1*7QzI18A7wTLO92bwFm1_7w.png)](https://insights.andamp.io/blog/testing-multiversx-former-elrond-smart-contracts?hsLang=en) ### [Testing MultiversX (former Elrond) Smart Contracts](https://insights.andamp.io/blog/testing-multiversx-former-elrond-smart-contracts?hsLang=en) An introduction to the Given-When-Then pattern, followed by instructions on how to use that pattern to test smart contracts. [![](https://miro.medium.com/v2/resize:fit:700/1*UFkzEEmfRMaD7WoN9njI4A.png)](https://insights.andamp.io/blog/how-to-set-up-synpress-for-web3-dapp-frontend-test-automation-with-metamask?hsLang=en) ### [How to set up Synpress for Web3 dApp Frontend Test Automation with MetaMask](https://insights.andamp.io/blog/how-to-set-up-synpress-for-web3-dapp-frontend-test-automation-with-metamask?hsLang=en) Setup, configuration, and example tests using Synpress / Cypress for end-to-end frontend test automation of a Web3 dApp with MetaMask login. [![logo_white](https://27222727.fs1.hubspotusercontent-eu1.net/hubfs/27222727/logo_white.svg "logo_white")](http:/?hsLang=en) [Follow &andamp on LinkedIn](https://www.linkedin.com/company/andamp/) [Follow &andamp on Instagram](https://www.instagram.com/_andamp_) ## Our Services - [Team as a Service](https://insights.andamp.io/team-as-a-service/) ## Sitemap - [Blog](https://insights.andamp.io/blog) - [Career](https://insights.andamp.io/career) - [About Us](https://insights.andamp.io/about-us) - [Code of Conduct](https://insights.andamp.io/code-of-conduct) - [Our Diversity Journey](https://andamp.io/diversity-journey) ## Our Mission We offer a risk-free way to optimize customer experience and realise your business' potential through MVPs ## Case Studies - [Notarity](https://insights.andamp.io/case-studies/notarity/) ## Location andamp GmbH Währinger Straße 48/2. Hof 1090 Vienna, Austria ## Contact Us [hello@andamp.io](mailto:hello@andamp.io) We would love to hear about your ideas! ### Let's build your project! This site is protected by reCAPTCHA and the Google [Privacy Policy](https://policies.google.com/privacy) and [Terms of Service](https://policies.google.com/terms) apply. ® 2025 andamp GmbH [Legal Notice](https://insights.andamp.io/legal-notice/?hsLang=en) [Privacy Policy](https://insights.andamp.io/privacy-policy/?hsLang=en) ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Martin Schwarz", "url" : "https://insights.andamp.io/blog/author/martin-schwarz" }, "dateModified" : "2025-12-11T10:20:49.881Z", "datePublished" : "2025-12-10T10:36:00.000Z", "headline" : "Our experience with Playwright", "image" : [ "https://miro.medium.com/v2/resize:fit:1400/1*JOD3XGILYm0Igru9LWgMOQ.jpeg" ], "mainEntityOfPage" : { "@id" : "https://insights.andamp.io/blog/our-experience-with-playwright", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://insights.andamp.io/hubfs/andamp%20Full%20Logo%20Blue%20Light.svg" }, "name" : "andamp GmbH" } } ```