We've added a lot to our demo project, bun--create-playwright. We've explored setting up a Playwright framework using bun, a new package manager bundled into Claude Code. We've added typechecking, and formatting and linting. We've set up a CI/ CD pipeline for our tests using GitLab, one with three stages: Quality: We check that the formatting, linting and typechecking is correct for any changes we attempt to push to the code base. Test: We run the smoke and then the regression tests to make sure that everything still works. Report: We bundle an archive of the Playwright generated HTML report,…
You may have noticed that in the GitLab CI / CD Pipeline for our Playwright project, in the .gitlab-ci.yml file, after our scripts has run, in the Test stage, there is a subsection called "artifacts" with certain paths to something called "playwright-report", "test-results", and "reports". The Playwright -> Artifacts -> Reports stage playwright: extends: .bun_playwright stage: test timeout: 30 minutes ... ... artifacts: when: always paths: - playwright-report/ - test-results/ - reports/ reports: junit: reports/junit/results.xml expire_in: 30 days…
Developers need the option to test out their feature branch before merging it into main. In the last section, we set up a GitLab CI/CD Pipeline in our bun-create-playwright project to check every GitLab Merge Request. Now, we will be giving developers option to create a new pipeline where they can choose: Which feature branch to test against. Which test suite to execute (LoginPage tests? Secure Area? Or all of them?) Which Playwright browser to use: Chromium, Firefox, WebKit, or all. All these features can be set up using our .gitlab-ci.yaml file! Go to to bun-create-playwright, view the…
So far, we have reviewed how to review code with ES Lint + Prettier and Typecheck, how to set up and run smoke tests, how to run all Playwright + TypeScript tests, and reviewed the HTML report of results. In this post, we are going to set up a three stage GitLab CI/ CD pipeline that will run against every merge request: Quality (lint, typecheck, prettier) --> Test ( smoke + regression ) --> Report ( Downloadable ) I haven't used GitLab since when I worked at ThreatStack back in 2020. ( See my blog entry Getting to Know GitLab and How They Test the UI ) GitLab reads .gitlab-ci.yml from the…
Earlier, we went over how we could create scripts in the package.json file of our Playwright framework to add typechecking, linting, and formatting your code with prettier. Want to see the entire bun-create-playwright project? It is on tinyurl.com/bun-create-playwright! With this post, we will explore how the built-in test runner for Playwright Test can run headed tests, debug versions of tests, and smoke tests. ... and shortcuts for all of these can be set up in the scripts in your package.json! If you are using "bun" as a package manager, as we are in bun-create-playwright, just type out…
Optional Google Analytics helps us understand visits. Microsoft Clarity records masked interactions to improve the site. Optional tools stay off unless you choose them. Privacy details.