Adventures in Automation

The thoroughness of Tom Johnson's free Documenting API's course on OpenAPI 3.0 and Swagger UI

2026-09-09T17:17:32.408-04:00

While researching information for my job about the Swagger UI and how it can be used for testing, I came across this free course, called Documenting APIs: A guide for technical writers and engineers at https://idratherbewriting.com/learnapidoc/docapis_overview.html written by Tom Johnson, a technical writer based in Seattle who works for Google.

The course looks intense, containing 17 chapters talking about Introduction to REST APIs, using APIs like a developer, Documenting API endpoints, the Open API spec, Testing API docs, Publishing API docs, and more.

From the Course Introduction: "You’ll first learn about API documentation by using a simple weather API to put a weather forecast on your site. [...] As you use the API, you’ll learn about endpoints, parameters, data types, authentication, curl, JSON, the command line, Chrome’s Developer Console, JavaScript, and more. The idea is that rather than learning about these concepts independent of any context, you learn them by immersing yourself in a real scenario while using an API. Immersion in real scenarios makes these tools and technologies more meaningful.

"We’ll then transition into standards, tools, and specifications for REST APIs. You’ll learn about the required sections in API documentation, analyze examples of REST API documentation from various companies, learn how to join an open-source project to get experience, and more.

"[...] We’ll also dive into specifications such as the OpenAPI specification and Swagger UI (which provides tooling for the OpenAPI specification). Additionally, you’ll learn how to document native library APIs and generate Javadoc".

Tom Johnson offers a PDF version of this free course... over 900 pages, with more always being added. It also offers many workshop-like activities you could put in an actual itinerary.

You would need for the course:

Chrome, since it provides "a Javascript Console that works well for inspecting JSON", the JSON Formatter Chrome extension, Postman, a GitHub account, an OpenAPI editor such as Swagger Editor.
We would be using tools like Git, curl.
The product under test would be the OpenWeatherMap API, so we would need to sign up to get an API Key from https://openweathermap.org/.

It also seems to offer the Video recordings of API doc workshops, and Course Slides for the links.

Working through the course, I found it very insightful, with Tom providing so many related links so you could really dive deep into a topic.

As it told the story of REST, it introduced SOAP API, explaining how it was too heavyweight, making it slower. It also introduced Dr. Roy Fielding who originated the Representational State Transfer architectural style in his disertation, Architectural Styles and the Design of Newwork-based Software Architecures, and co-founded the Apache HTTP Server project.
When talking about curl, it referenced the curl man pages at https://curl.se/docs/manpage.html. Tom then walked through how you could interact with the Swagger Petstore API to create a new pet, update the pet, get the pet's ID, delete the pet, then try to verify the pet was truly deleted. [Activity: Use methods with curl]
When talking about using APIs like a developer, it instructed the reader how to use some autogenerated jQuery code from Postman to create an AJAX request, generate an API key from a service like OpenWeatherMap.org, then use that key to do things such as access specific information from an API using dot notation, and create a web page embedded with your local weather information such as wind speed and temperature. [Activity: Inspect the JSON from the response payload]
When introducing the parts of a REST API, mentioning how GraphQL is slightly different, it mentioned the API Evangelist's GraphQL and REST differences as explained with Burgers.
When introducing the OpenAPI spec, it mentions SmartBear's free API Documenting tool called Stoplight, pointing out some Stoplight: Getting Started tutorials (also created by Tom Johnson).
When talking about OpenAPI, Tom references There’s No Reason to Write OpenAPI By Hand by Phil Sturgeon and with Codegen, Tom mentions we should see Comparison of Automatic API Code Generation Tools For Swagger by Kin Lane, aka the API Evangelist and tools such as OpenAPI Generator ... all before an introducing a chapter on how to manually create the code, a best practice in the industry. "The main weakness of generating your OpenAPI spec from code is that the spec can no longer serve as the blueprint for creating the API, and instead becomes an afterthought".

It covers a lot of material such as:

Five common sections in REST API docs: Resource description, Endpoints and Methods, Parameters, Request example, Response example and schema
An Introduction to the OpenAPI spec, OpenAPI spec and generated reference docs contains a Swagger UI tutorial working with the Swagger Petstore.
Downloading Swagger UI and pointing it to another API such as the OpenWeatherMap API [Swagger UI Tutorial]

All of this is written from a technical writer's perspective.

About writing Quick Reference Guides describing APIs: "Quick reference guides are like the poetry of technical writing. The goal is not just to be brief or concise. With poetry, the poet attempts to evoke a mood or paint a moment, and in that brief moment, capture the essence of the whole".

He does make sure to give a shoutout to us software testers:

REST API Doc Parameters: "When you test an API, try running an endpoint without the required parameters, or with the wrong parameters, or with values that exceed the max or min amounts. See what kind of error response comes back. Include that response in your status and error codes section. I talk more about the importance of testing in Testing your docs".

Thank you so much, Tom Johnson for this free course!

Happy Testing!

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles

Testing the Swagger Petstore: Manually Testing An API Using Swagger UI

2026-09-07T12:43:41.791-04:00

With the last post, Testing the Swagger Petstore: Reviewing API Documentation Formatted in OpenAPI 3.0 with Swagger UI we started exploring an API with Swagger UI, such as the Swagger Petstore at https://petstore3.swagger.io/

Here, we will start exploring how to test an API using the Swagger UI.

The tests we can run are:

Happy Path Testing, checking the Positive Scenarios
Negative Testing, reviewing the Invalid Inputs & Error Handling
Boundary & Edge Case Testing, checking how the API handles the extreme limits of allowed input ranges
Authentication & Authorization Testing
Contract and schema validation

We can see in the Swagger PetStore there are three tag groups: Pet, Store, and User.

Because this is a Swagger UI doc, we can perform manual testing using only the "Try it out" feature in Swagger UI. No external tools needed! Live HTTP requests can be executed directly from your browser.

Types of Testing for the API

Here are a few types of testing and examples you can do in Swagger UI

Happy path Functional Testing

Pet

POST /pet: add a new pet with a complete, valid payload. Verify 200 and that the response echoes the submitted fields.
PUT /pet: update the pet you just created. Verify the change persists on a follow-up GET.
GET /pet/{petId}: retrieve the pet by the ID returned from the POST.
GET /pet/findByStatus: query with each valid status value (available, pending, sold) individually.
GET /pet/findByTags: query with a tag that exists on a pet you created.
POST /pet/{petId} (form data): update name/status via form fields instead of JSON body.
POST /pet/{petId}/uploadImage: upload a valid image file, verify response message and metadata.
DELETE /pet/{petId}: delete a pet you created, then confirm GET on that ID now fails.

Store

POST /store/order: place an order with valid petId, quantity, shipDate, status.
GET /store/order/{orderId}: retrieve the order just placed.
GET /store/inventory: verify it returns a status-to-count map without needing auth.
DELETE /store/order/{orderId}: delete the order, confirm subsequent GET fails.

User

POST /user: create a user with all fields populated.
POST /user/createWithList: create multiple users in one call.
GET /user/{username}: retrieve the user just created.
PUT /user/{username}: update user details.
GET /user/login and GET /user/logout: exercise the session flow, check the response headers for any session/rate-limit info.
DELETE /user/{username}: delete the user, confirm GET now fails.

Negative testing

Omit required fields (e.g. POST /pet with no name, POST /store/order with no petId) and confirm the API rejects or documents the discrepancy if it doesn't.
Send wrong data types: string where an integer is expected (petId, orderId, quantity), or a malformed date in shipDate.
Send an invalid enum value for status (pet or order) that isn't in the documented list, e.g. status=deleted.
Request a non-existent ID: GET/PUT/DELETE on /pet/{petId}, /store/order/{orderId}, /user/{username} with an ID or username that was never created.
Use a negative or zero orderId/petId, since the spec marks these as int64 without an explicit floor documented in the UI.
Send an empty request body where one is required.
Submit extra, undocumented fields in the payload and see if they're silently accepted, rejected, or reflected back.
Try invalid characters/encoding in path parameters (e.g. username with special characters or spaces).
Upload a non-image file to /pet/{petId}/uploadImage or exceed a large file size.

Boundary and edge cases

Very long strings in name, username, tags fields.
Empty string values in string fields that are technically optional vs required.
Minimum/maximum int64 values for petId/orderId.
Unicode and emoji in name/tag/comment fields.
Duplicate creation: POST the same username or petId twice, check whether the API allows duplicates or returns a conflict.
Repeat DELETE on the same resource (idempotency check), confirm the second call fails gracefully rather than erroring unexpectedly.
Repeat identical PUT calls and confirm the result is stable (no unintended side effects on repeated identical updates).

Contract and schema validation

For every response, expand the "Model" / "Schema" tab in Swagger UI and confirm the actual response body matches the documented schema, including field names, types, and nesting (e.g. category and tags as nested objects/arrays on Pet).
Check that all documented HTTP status codes for an endpoint are reachable in practice (200, 400, 404, 405) not just the happy-path 200.
Confirm response Content-Type header matches what's declared (application/json vs application/xml, since Petstore documents both for some endpoints).
Verify example values shown in the UI docs actually produce the documented example response when submitted as-is.

Authentication Testing

Where api_key is documented (e.g. DELETE /pet/{petId}), test the call with the key present, with an invalid key, and with it omitted entirely, and compare behavior.
Exercise GET /user/login with valid and invalid credentials and observe whether/how it differentiates in status code or message.

UI-specific / exploratory checks

Use the auto-generated curl command (Swagger UI shows this after "Execute") to confirm the request it built matches what you intended, useful for catching parameter-encoding issues.
Check response time shown in the UI for anomalies on larger payloads (e.g. uploadImage).
Toggle between the documented request body examples and hand-edit them to confirm the "Try it out" editor validates JSON syntax before allowing submission.
Cross-check the UI's rendered documentation (descriptions, required markers) against actual server behavior to catch doc drift, a common defect class in Swagger-driven APIs.
Since this is a shared public demo instance, run a read-only check (GET /store/inventory, GET /pet/findByStatus) before and after your write tests to see if state persists or resets, which matters for repeatable test design.

Parameter & Header Testing

Targets how the API handles different ways data can be sent.
Query Parameters: Test GET endpoints that filter data (like /pet/findByStatus) by selecting different dropdown values or entering multiple statuses to verify the filtering logic.
Path Parameters: Verify how the API reacts to special characters or spaces injected directly into the URL path.

Now that we have some possible testing examples, in our next post, we can start investigating the Swagger Petstore.

Happy Testing!

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles

Testing the Swagger Petstore: Reviewing API Documentation Formatted in OpenAPI 3.0 with Swagger UI

2026-09-04T23:09:27.224-04:00

For this next project, we will be examining the test site Swagger Petstore - OpenAPI 3.0 at https://petstore3.swagger.io/

https://petstore3.swagger.io/

If we wanted to really dive deep into creating API documentation, we could use:

I'dRatherBeWriting's Free Documenting APIs course, showing an Introduction to REST APIs, using APIs like a developer, Documenting API endpoints, the Open API spec, Testing API docs, Publishing API docs, and more...

... But that goes too deep for this blog post.

Before we begin, let's get into some background information.

What is Swagger?

According to OpenAPISpec.com's article, Who Created Swagger?, Swagger was created in 2010 by Tony Tam, the CTO of Wordnik, an online dictionary company that leveraged so many APIs, it was difficult for the six person engineering team to manage and scale them, writing API-clients and documentation by hand. After a 3 AM conversation, they thought... what if the API documentation could describe itself?

There already was WADL, the XML-based Web Application Description Language. The name was coined after a joke they made, "Why WADL when you can Swagger?"

Swagger went from being an internal fix for a company became to an open-source project other companies relied on.

Swagger was acquired by SmartBear Software in 2015 from the renamed Wordnik, Reverb Technologies. According to OpenAPISpec's What Is the History of the SmartBear Swagger Acquisition Tony Tam also joined SmartBear as the VP of Products. Smartbear donated the Swagger Specification to a new group, the OpenAPI Initiative, sponsored by the Linux Foundation.

I love SmartBear! They have hosted my old software testing Meetup, the now defunct Ministry of Testing - Boston many, many times.

Since then:

"OpenAPI" is the OpenAPI Specification as seen on GitHub
"Swagger" is SmartBear's toolset such as Swagger UI, Swagger Editor, Swagger Codegen, and SwaggerHub (soon to be Swagger Studio).

OpenAPI Initiative: Bridging Systems and Subcultures: A Swagger Origin Story

https://youtu.be/_G9dlv66-xw?si=Nk0hihe7TSueXDj9

Where To Learn Swagger?

Luckily, there are many free places to learn Swagger, from both SmartBear and OpenAPI.

About Swagger: https://swagger.io/docs/specification/v3_0/about/
OpenAPI 3.0 Tutorial: https://support.smartbear.com/swagger/studio/docs/en/get-started/openapi-3-0-tutorial.html

Courses at SmartBear Academy: https://academy.smartbear.com/

SwaggerHub Introductory Training
SwaggerHub API Designer
Introduction to Contract Testing
ReadyAPI Basics, Advanced, to learn about being an API Test Engineer
Intro to API Hub for Contract Testing

Linux Foundation Org:

Training Portal: https://trainingportal.linuxfoundation.org/learn/dashboard
OpenAPI Fundamentals: https://training.linuxfoundation.org/express-learning/openapi-fundamentals-lfel1011/

Open APIs:

Learn.OpenAPIs.Org: https://learn.openapis.org/
OpenAPI Spec 3.0.4: https://spec.openapis.org/oas/v3.0.4.html

OpenAPI Videos: https://www.youtube.com/@OpenApi/videos

Leveraging OpenAPI to Test Your APIs
Accelerate Adoption of OpenAPI with Test Automation
Use OpenAPI Specs to Drive API Quality

What is Swagger Petstore?

The first version of the Swagger Petstore was a sample server app produced by Tony Tam and his engineering team when Wordnik first introduced Swagger, so others could check out Swagger's capabilities. It's not a real server.

This third version is now hosted by Smartbear, and is updated to Open API 3.0.

The page, https://petstore3.swagger.io/ is generated on-the-fly with Swagger UI, from the YAML file, https://petstore3.swagger.io/api/v3/openapi.yaml.

Swagger Petstore Repo: https://github.com/swagger-api/swagger-petstore/tree/master

What is Swagger UI?

Swagger UI is a web application that reads an OpenAPI definition and renders interactive API documentation.

Swagger UI was developed as an open-source web application that could render a Swagger or OpenAPI specification into a human-readable way to examine an API, eliminating the need for developers and testers to manually read raw JSON or YAML API definitions.

Swagger UI allows users to browse API operations, inspect request and response schemas, authenticate against secured APIs, and execute live API calls directly from a browser.

A few features of Swagger UI:

Auto-Generated Documentation: Swagger UI reads your API schema file and dynamically creates a clean, organized webpage. It groups endpoints, shows paths, and lists response codes without requiring manual HTML coding.
"Try It Out": Users can enter parameters, headers, and request bodies directly into the browser to execute live API calls against a real or mocked server and see the exact response in real-time.
Clear Schema Models: It details the required data structures, object types, and validation constraints for every request and response, serving as an interactive contract for developers.
No Dependencies: It is a client-side asset (built with HTML, JavaScript, and CSS) that runs entirely inside any modern web browser without needing a backend server or a database.

The Components of Swagger UI

You can use the Swagger UI to explore APIs in JSON or YAML format.

The OpenAPI document we are exploring is https://petstore3.swagger.io/api/v3/openapi.json.

If you open that URL directly in a browser, you won't see the formatted page. You'll see raw YAML file describing every endpoint, parameter, and data model.

The "Explore" button just tells Swagger UI to fetch and render whatever spec URL is typed into that box, which is handy if you're pointing the same Swagger UI instance at a different API's spec file.

To the right of the name, the grey badge shows you the version of the API, and the green badge shows you which version of the OpenAPI Specification conforms to [Swagger UI Doc / version detection].
Need to review the actual spec? It is provided in the link below the title.

OpenAPI 3.0 spec includes a servers array that defines the base URL an array can be reached at. Every endpoint path, such as "/pet", will get appended to it... so /pet + /api/3 resolves to https://petstore3.swagger.io/api/v3/pet [ Swagger UI Doc / API Server and Base Path ]
Servers can point to, say, a dev server, a staging server, and a production server.
The Authorize button with the lock relates to the authentication scheme, such as an API Key, OAuth2, etc. Clicking on it lets you supply credentials so that "Try it Out" requests you send from the page contains them.

Below the Servers and Authorize button, you can see three groupings: pet, store, and user.

In the OpenAPI spec, they are called tags. [ Swagger 3.0 / Grouping Operations With Tags ]

These tags are set up by the API developer designing this OpenAPI Yaml or JSON spec to group up common endpoints. If you expand pet, for example, you can see that it shows how you can interact with the /pet endpoint, such as with the HTTP Methods such as PUT, POST, GET and DELETE.

GET retrieves data. It does not create, change, or delete anything on the server. In the Petstore, GET /pet/{petId} fetches one pet's details without touching it.
POST creates something new, or submits data for processing. In the Petstore, POST /pet creates a brand new pet entry.
PUT replaces an existing resource entirely with the data you send. In the Petstore, PUT /pet updates an existing pet. You send the pet's full data, including its ID, not just the one field that changed.
DELETE removes a resource. In the Petstore, DELETE /pet/{petId} removes one specific pet by ID.The bottom section on the Swagger UI is the Schema section. Everything above the schema describes operations: what you can do, at which path, and with which method in the API.

The schema describes data, the reusable objects the operations pass around. In OpenAPI spec, they live in a components.schema field. [ See Swagger Docs / Spec / Basic Structure ].

The six models listed here are the core data types the Petstore is built around:

Order: the format of a store order (what you'd get back from the store tag's order operations).
Category: a pet's category, like "Dogs," which you actually saw nested inside the pet JSON examples in earlier screenshots.
User: a user account record.
Tag: not the same thing as the pet/store/user grouping tags from earlier; this is a data model representing a label attached to a pet (also visible nested inside the pet JSON examples).
Pet: the main object type, the full shape of a pet record: ID, name, category, photo URLs, tags, status.
ApiResponse: a generic response wrapper, commonly used for operations like uploadImage that return a simple status/message rather than a full resource.

Each of these schemas can be expanded to show the model's actual fields, data types, and if they are required.

Here, the schema can be defined once, with GET / PUT / POST, etc calls all getting the format of what a "Pet" actually is from this. New field? An API developer can just add it here.

What Is The Pet Schema?

If you expand the PET schema, you can see that it contains the fields, data types, and gives some examples of proper data you can submit:

id: integer. Example: 10
name (required): string. Example: "doggie".
category: id (integer) and name (string). Example: "1. Dogs"
photoUrls(required): name: photoUrl: wrapped: tru
tags:
status: "pet status in the store". Enum: available, pending, sold

When Photourls and tags are xml wrapped: true, it means the XML will use a parent element wrapper to encase all the items in the list, rather than just repeating the elements consecutively.

<photoUrls> <photoUrl>string</photoUrl> <photoUrl>string</photoUrl> </photoUrls>

Examining the PUT /pet endpoint

The HTTP PUT request method updates and changes the parameters of an existing pet. POST creates a brand new one. GET retrieves the pet object. DELETE deletes them. And you can do that all through this Swagger UI.

Each of the methods, such as the PUT /pet endpoint, can be expanded, so you can see and tinker with the APIs parametets.

The Request Body dropdown can show examples such as application/json:

{
  "id": 10,
  "name": "doggie",
  "category": {
    "id": 1,
    "name": "Dogs"
  },
  "photoUrls": [
    "string"
  ],
  "tags": [
    {
      "id": 0,
      "name": "string"
    }
  ],
  "status": "available"
}

... Application/xml...

<?xml version="1.0" encoding="UTF-8"?>
<pet>
	<id>10</id>
	<name>doggie</name>
	<category>
		<id>1</id>
		<name>Dogs</name>
	</category>
	<photoUrls>
		<photoUrl>string</photoUrl>
	</photoUrls>
	<tags>
		<tag>
			<id>0</id>
			<name>string</name>
		</tag>
	</tags>
	<status>available</status>
</pet>

... Or even application/x-www.form-urlencoded:

Update an existent pet in the store
id
integer($int64)

name *
string

category
object

photoUrls *
array<string>

tags
array<object>

status
string

The Responses dropdown can show what a successful response would look like, after creating a new pet in the API with either application/json format:

{
  "id": 10,
  "name": "doggie",
  "category": {
    "id": 1,
    "name": "Dogs"
  },
  "photoUrls": [
    "string"
  ],
  "tags": [
    {
      "id": 0,
      "name": "string"
    }
  ],
  "status": "available"
}

... or application/xml format...

<?xml version="1.0" encoding="UTF-8"?>
<pet>
	<id>10</id>
	<name>doggie</name>
	<category>
		<id>1</id>
		<name>Dogs</name>
	</category>
	<photoUrls>
		<photoUrl>string</photoUrl>
	</photoUrls>
	<tags>
		<tag>
			<id>0</id>
			<name>string</name>
		</tag>
	</tags>
	<status>available</status>
</pet>

It also shows error codes such as:

400 Invalid ID supplied
404 Pet not found
422 Valid exception
default Unexpected error.

422 is a new one to me. This means it is an Unprocessable Entity... the request was correctly formatted, but the data itself failed validation rules once the server tried to process the call. Like, say for example the status of a pet could only be "available", "pending" or "sold", and you put in "cuddly", it should throw a 422.

default is thrown when we do not explicitly catch an error. Example: If it is a 500 Internal Server Error, or a 401 Unauthorized, it displays that response, and not any of the special statuses we have put aside.

Examining the POST /user endpoint

Let's examine the POST Method for the /user endpoint, which creates a user if we are logged into the system.

Here, also, we can sent information to the server, attempting to POST it like so:

{
  "id": 10,
  "username": "theUser",
  "firstName": "John",
  "lastName": "James",
  "email": "john@email.com",
  "password": "12345",
  "phone": "12345",
  "userStatus": 1
}

If we see that it is successful, we will see a 200 Response.

{
  "id": 10,
  "username": "theUser",
  "firstName": "John",
  "lastName": "James",
  "email": "john@email.com",
  "password": "12345",
  "phone": "12345",
  "userStatus": 1
}

If not, we will get nothing fancy, just a default, Unexpected error.

Examining the GET /user/login endpoint

After a user is created, the GET /user/login endpoint logs you into the system.

Enter the username and password of a user, and you can log into the system.

Next, we will be looking how to manually test this API using this Swagger UI.

Happy Testing!

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles

Publishing Playwright HTML reports on GitLab Pages

2026-08-29T19:56:10.788-04:00

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, with screenshots and videos if things fail.

For this post, we will add a new stage to this GitLab pipeline:

Deploy: Where we will deploy the HTML report to GitLab Pages, so we can view it online.

What is GitLab Pages?

GitLab Pages is a built-in feature of GitLab that allows you to publish static websites directly from a repository in GitLab. Similar to GitHub Pages, it is commonly used to host project documentation, personal blogs, portfolios, or corporate landing pages for free.

From the GitLab Docs / Pages: "To use GitLab Pages, you must create a project in GitLab to upload your website’s files to. These projects can be either public, internal, or private.

"By default, GitLab deploys your website from a specific folder called public in your repository. You can also set a custom folder to be deployed with Pages. When you create a new project in GitLab, a repository becomes available automatically.

"To deploy your site, GitLab uses its built-in tool called GitLab CI/CD to build your site and publish it to the GitLab Pages server. The sequence of scripts that GitLab CI/CD runs to accomplish this task is created from a file named .gitlab-ci.yml, which you can create and modify. A user-defined job with pages: true property in the configuration file makes GitLab aware that you’re deploying a GitLab Pages website.

"You can either use the GitLab default domain for GitLab Pages websites, *.gitlab.io, or your own domain (example.com). In that case, you must be an administrator in your domain’s registrar (or control panel) to set it up with Pages".

How To Confirm That GitLab Pages is Set Up

Go to bun-create-playwright
Go to Settings > General.
Expand Visibility, project features, permissions.
Confirm the Pages toggle is on.

https://gitlab.com/tjmaher/bun-create-playwright/edit#js-shared-permissions

... It seems that GitLab Pages is turned on by default for new projects. We'd only see it off if someone disabled it. (See GitLab Pages access control docs).

Create a New Pages Job In the Report Stage in .Gitlab-ci.yml

We will add the following code to our GitLab bun-create-playwright project, building on the Report stage we created earlier, adding a new "pages" job.

pages:
  stage: report
  image: alpine:3.24
  needs:
    - job: playwright
      artifacts: true
      optional: true
    - job: playwright:manual
      artifacts: true
      optional: true
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
  script:
    - echo "Deploying Playwright HTML report to GitLab Pages"
  pages:
    publish: playwright-report  

Here, in the pages job:

We are adding this pages job to the "report" stage.
We are using the lightweight Docker image, Alpine 3.24, a small Linux distribution.
It needs the earlier "playwright" job that ran the Playwright tests to finish. It pulls in the artifacts saved by that job -- the screenshots, HTML report, etc. And it is optional, so if the previous job fails, due to tests erroring out, we will still run this job.
Also, it does not matter if it came from the regular playwright job created when someone pushed changes and a pipeline was created, or if someone created a brand new pipeline. This job will run.

Rules: We are only going to run this job of the commit is on the default branch on main, so pages won't get republished from every feature branch.

We print out the message that we are deploying...

Then we use in the Pages stage the GitLab keyword Publish to take everything in the playwright-report folder, containing the HTML Report as an index.html file, and publish that as a website.

Once we create this new stage, let's push the changes and see what happens...

Verify Everything is Correct ... and PUSH!

Let's make sure everything is in the correct format:

Check against the TypeScript compiler: bun run typecheck
Fix any formatting issues with Prettier: bun run format
Fix any linting issues with ES Lint: bun run lint:fix

Pushing the changes onto our main branch:

git add .
git commit -m "chore: Push Report to GitLab Pages"
git push

Did Everything Pass?

Okay, let's check everything in the new pipeline generated when we just pushed the new stage in the .gitlab-ci.yml file onto the main branch...

https://gitlab.com/tjmaher/bun-create-playwright/-/pipelines/2801419668

Quality stage: All Green!
Test Stage: All Green!
Report Stage, with the new pages stage we just created... all green!
And a new Deploy stage is generated with a pages:deploy job.

"The pages:deploy job is an internal, automatically generated 'magic' job in GitLab CI/CD that runs immediately after your user-defined pages job finishes successfully to upload and publish your static website.

"Purpose: It separates the build/compile phase (which you control in your custom pages job) from the actual hosting deployment handled safely by GitLab". [ GitLab Docs / Deployment Process ].

Is Everything Deployed?

https://gitlab.com/tjmaher/bun-create-playwright/pages#overview

Is Everything Published on GitLab Pages?

https://bun-create-playwright-2c323e.gitlab.io/

Yes! We now have Playwright's HTML Report deployed to GitLab pages!

Note: Each time there is a change, this GitLab doc will be overwritten and only the latest results will be shown.

Next, we will be looking at another possible solution to reports... called ReportPortal.

Until then, Happy Testing!

Bun Create Playwright:

Part One: Introducing bun, a new package manager and JavaScript runtime environment
Part Two: What happens when you scaffold a Playwright framework and run installed tests using bun?
Part Three: Add Type Checking and TSConfig to Bun-Create-Playwright
Part Four: Checking code with lint, formatting it with prettier
Part Five: Running Tests with Playwright Test Explorer and Generating Tests with Codegen
Part Six: How Playwright Frameworks get configured with playwright.config.ts
Part Seven: Implementing Page Objects in Playwright
Part Eight: How to Configure Playwright Test to run smoke tests, headed tests, and debug versions through scripts in package.json
Part Nine: Setting up a CI/ CD pipeline with GitLab: Quality, Test and Report
Part Ten: How Developers Can Test Their Feature Branch Against Various Playwright Configurations Before Creating a Merge Request in GitLab CI/CD
Part Eleven: Examining the artifacts job of a Playwright GitLab CI / CD pipeline
Part Twelve: Publishing Playwright HTML reports on GitLab Pages
GitLab: https://gitlab.com/tjmaher/bun-create-playwright

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles

Examining the artifacts job of a Playwright GitLab CI / CD pipeline

2026-08-29T19:19:22.027-04:00

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

https://gitlab.com/tjmaher/bun-create-playwright/-/blob/main/.gitlab-ci.yml

Every time Playwright tests run, it generates proof of the test execution: screenshots capturing the state of the UI when a test failed, video recordings of an entire browser session, HTML and JUnit XML test reports, trace reports showing action logs, network requests. These artifacts, when the tests run locally, are placed by the Playwright Test runner in generated folders, playwright-report and test-results, along with a folder called reports/junit.

With this post, we will be examining how this artifacts stage of the GitLab CI/ CD pipeline produces downloadable artifacts we can examine.

Playwright-Report: A Playwright Test folder

The Playwright Test runner creates a folder called "playwright-report", if it doesn't already exist, and an HTML file called index.html documenting the completed test run.

From Playwright.dev / Test Reporters: "Playwright Test comes with a few built-in reporters for different needs and ability to provide custom reporters. [...] All built-in reporters show detailed information about failures, and mostly differ in verbosity for successful runs. [...] HTML reporter produces a self-contained folder that contains report for the test run that can be served as a web page".

The HTML Report is the one that automatically opens after you run your tests locally, or if you are using the node package manager: npx playwright show-report ... or if you are using bun: bunx playwright show-report.

By default, this report is written into the playwright-report folder.

Test-Results: A Playwright Test folder

The test-results folder is the default folder for all output artifacts such as:

screenshots
videos
traces captured on failure or retry

Videos: You can explicitly tell Playwright Test to record videos either for each test ("on"), record a video for each test but delete the video if the test is successful, ("retain-on-failure"), or record video only when retrying a test for the first time ("on-first-retry") - From Playwright.dev / Videos

Traces: See Playwright.dev / Trace Viewer. Locally, you could run a test with: bunx playwright test --trace on

Reports: Contains Playwright's generated JUnit report. We are telling GitLab to take the reports/junit/reselts.xml file, zip it up, and store it so later we can turn it into a downloadable artifact.

What is a GitLab Artifact?

GitLab Docs, under "Job Artifacts" says, "Jobs can output an archive of files and directories. This output is known as a job artifact. Artifacts can include build output or report files. By default, later jobs fetch a copy of all artifacts from jobs in earlier stages.

"For example, an early job can build a project and save the output as an artifact. Then a later job fetches the artifact and runs tests on the saved build output. For a full list of supported configuration for the artifacts keyword, see the GitLab CI/CD YAML syntax reference.

"To create job artifacts, use the artifacts keyword in your .gitlab-ci.yml file

"[...] The paths keyword determines which files to add to the job artifacts. All paths to files and directories are relative to the repository where the job was created".

So, the artifacts block we listed will create three directories:

playwright-reports
test-results
reports

"The expire_in keyword determines how long GitLab keeps the artifacts defined in artifacts:paths".

For now, we have indicated we want to expire the artifacts in 30 days.

What is GitLab's Artifact:Reports?

This folder is where we are going to be storing the Playwright generated JUnit XML report of the test results.

Under GitLab CI/CD artifacts report types, "Use artifacts:reports to:

"Collect test reports, code quality reports, security reports, and other artifacts generated by included templates in jobs.
"Some of these reports are used to display information in: Merge requests. Pipeline views. Security dashboards.

"Artifacts created for artifacts: reports are always uploaded, regardless of the job results (success or failure). You can use artifacts:expire_in to set an expiration time for the artifacts, which overrides the instance’s default setting. GitLab.com might have a different default artifacts expiry value".

What is Artifact:Reports:JUnit?

"The junit report collects JUnit report format XML files. The collected Unit test reports upload to GitLab as an artifact. Although JUnit was originally developed in Java, there are many third-party ports for other languages such as JavaScript, Python, and Ruby".

The playwright/reports/junit/results.xml file is a machine-readable test report structured in the standardized JUnit XML format, capturing high-level execution statistics and detailed test suite metadata so that Continuous Integration (CI/CD) pipelines can natively parse and display test results, metrics, and trends.

The file wraps your tests into <testsuites> and <testsuite> elements, with individual tests mapped to <testcase> tags.

<testsuites id="" name="" tests="9" failures="0" skipped="0" 
errors="0" time="5.402829">
<testsuite name="login.spec.ts" timestamp="2026-08-29T16:29:20.251Z" 
hostname="chromium" tests="2" failures="0" skipped="0" time="7.657" 
errors="0">
<testcase name="Login › unsuccessful login with invalid credentials" 
classname="login.spec.ts" time="3.828">
</testcase>
<testcase name="Login › successful login with valid credentials" 
classname="login.spec.ts" time="3.829">
</testcase>
</testsuite>
<testsuite name="secure-area.spec.ts" timestamp="2026-08-29T16:29:20.251Z" 
hostname="chromium" tests="1" failures="0" skipped="0" time="3.963" errors="0">
<testcase name="Secure Area › logout returns to login with success alert" 
classname="secure-area.spec.ts" time="3.963">
</testcase>
</testsuite>

So, the artifacts stage in in our test run stores all the artifacts in our test run.

Now that the artifacts have been placed, the reports can be run!

Assemble the Reports Stage!

In the Gitlab CI/ CD pipeline:

The Quality stage checked the code before the tests ran.
The Test stage ran the Playwright test and handled the artifacts.
The Report stage assembles the report.

The Reports Stage

report:

  stage: report

  image: alpine:3.24

  # Runs even when the test job failed, which is when the report matters most.

  when: always

  needs:

    - job: playwright

      artifacts: true

      optional: true

    - job: playwright:manual

      artifacts: true

      optional: true

  script:

    - ls -la playwright-report/ test-results/ reports/junit/ || true

  artifacts:

    when: always

    paths:

      - playwright-report/

      - test-results/

      - reports/

    reports:

      junit: reports/junit/results.xml

    expire_in: 30 days

Here, we are using a lightweight Docker image called alpine, an Alpine Linux 3.24 container to execute this stage. A heavy image with Node/ Playwright isn't needed.

This stage will start up as soon as the "playwright" job in Tests stage finishes. It will always start whether or not the other stages fail.

The earlier playwright job? It needs those artifacts we set up.
It doesn't matter if the playwright job was kicked off by a merge (the playwright job) or a new pipeline created manually (the pipeline:manual job we set up earlier).

For visibility's sake, we will list out in the logs all the contents of playwright-report, test-results, and reports/junit. If there are no contents, that is fine. || true ensures the job does not fail if one of those directories does not exist.

With the paths, we set up playwright-report, test-results, and reports/junit as downloadable artifacts.

And in reports, this file isn't just archived. It is parsed, and puts the results directly in GitLabs's merge request UI, showing all pass/ fail counts.

Now, everything can be downloaded and examined to see how the test run went!

Next, we can look into posting the HTML report onto GitLab Pages.

Until then, Happy Testing!

Bun Create Playwright:

Part One: Introducing bun, a new package manager and JavaScript runtime environment
Part Two: What happens when you scaffold a Playwright framework and run installed tests using bun?
Part Three: Add Type Checking and TSConfig to Bun-Create-Playwright
Part Four: Checking code with lint, formatting it with prettier
Part Five: Running Tests with Playwright Test Explorer and Generating Tests with Codegen
Part Six: How Playwright Frameworks get configured with playwright.config.ts
Part Seven: Implementing Page Objects in Playwright
Part Eight: How to Configure Playwright Test to run smoke tests, headed tests, and debug versions through scripts in package.json
Part Nine: Setting up a CI/ CD pipeline with GitLab: Quality, Test and Report
Part Ten: How Developers Can Test Their Feature Branch Against Various Playwright Configurations Before Creating a Merge Request in GitLab CI/CD
Part Eleven: Examining the artifacts job of a Playwright GitLab CI / CD pipeline
Part Twelve: Publishing Playwright HTML reports on GitLab Pages
GitLab: https://gitlab.com/tjmaher/bun-create-playwright

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles

How Developers Can Test Their Feature Branch Against Various Playwright Configurations Before Creating a Merge Request in GitLab CI/CD

2026-08-28T16:18:08.540-04:00

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 Pipelines section, and select the New Pipeline button.

Run a New Bun-Create-Playwright Pipeline

If you go to the Run new pipeline page at https://gitlab.com/tjmaher/bun-create-playwright/-/pipelines/new you can see the following default values I've set:

https://gitlab.com/tjmaher/bun-create-playwright/-/pipelines/new

By default:

Branch name is "main", TEST_SUITE is "all", BROWSER is "all".

... But all these values can be set, with the developer choosing the options laid out in the .gitlab-ci.yaml file.

Collect User Data With Spec Inputs

We are going to be adding to the GitLab Pipeline we built in our last post Setting up a CI/ CD pipeline with GitLab: Quality, Test and Report.

First, we are going to add a "spec" section to the header of the YAML file to define the behavior of a pipeline, and within that spec header, we will ask the person who triggered a new pipeline to set user defined inputs for the pipeline.

spec:
  inputs:
    browser:
      description: "Browser project to run against."
      default: "all"
      options: ["all", "chromium", "firefox", "webkit"]
    suite:
      description: "Select full regression suite, or a single spec"
      default: "all"
      options: ["all", "login.spec.ts", "secure-area.spec.ts"]

This is where we declare the "browser" and "suite" variables that appear when a user creates a new pipeline.

We've given them a choice to run their feature branch code against:

Browser: All, Chromium, Firefox, or Webkit.
Suite: A full regression with all tests to be run? Just the login.spec.ts ones we set up? Or just the secure-area.spec.ts ones?

From Playwright.dev / Browsers: "Each version of Playwright needs specific versions of browser binaries to operate. You will need to use the Playwright CLI to install these browsers.

"With every release, Playwright updates the versions of the browsers it supports, so that the latest Playwright would support the latest browsers at any moment. It means that every time you update Playwright, you might need to re-run the install CLI command.

"[...] Playwright can run tests on Chromium, WebKit and Firefox browsers as well as branded browsers such as Google Chrome and Microsoft Edge. It can also run on emulated tablet and mobile devices. See the registry of device parameters for a complete list of selected desktop, tablet and mobile devices.

"[...] Playwright's WebKit is derived from the latest WebKit main branch sources, often before these updates are incorporated into Apple Safari and other WebKit-based browsers. This gives a lot of lead time to react on the potential browser update issues. Playwright doesn't work with the branded version of Safari since it relies on patches. Instead, you can test using the most recent WebKit build.

Add New Workflow Rules

Next, we will add a few new rules to the workflow.

"Use the workflow keyword in your .gitlab-ci.yml file to control when pipelines are created.

"The workflow keyword is evaluated before jobs. For example, if a job is configured to run for tags, but the workflow prevents tag pipelines, the job never runs".

According to the Gitlab Docs / yaml / workflow, here are some example if clauses for workflow rules:

Example rules	Details
`if: '$CI_PIPELINE_SOURCE == "merge_request_event"'`	Control when merge request pipelines run.
`if: '$CI_PIPELINE_SOURCE == "push"'`	Control when both branch pipelines and tag pipelines run.
`if: $CI_COMMIT_TAG`	Control when tag pipelines run.
`if: $CI_COMMIT_BRANCH`	Control when branch pipelines run.

What Are GitLab Pre-Defined Variables?

Before you create a GitLab pipeline, just after you create a pipeline, certain pre-defined variables (See GitLab Docs) get filled in with values describing what type of pipeline is created. For example:

CI_PIPELINE_SOURCE: Pre-pipeline

How the pipeline was triggered. The value can be one of the pipeline sources
What triggered the pipeline? It can capture values such as: api, chat, external, external_pull_request_event, merge_request_event, ondemand_dast_scan, ondemand_dast_validation, parent_pipeline, pipeline, push, schedule, security_orchestration_policy, trigger, web, webide

CI_COMMIT_BRANCH: Pre-pipeline

The commit branch name. Available in branch pipelines, including pipelines for the default branch. Not available in merge request pipelines or tag pipelines.
Available in branch pipelines, including pipelines for the default branch. Not available in merge request pipelines or tag pipelines.

CI_OPEN_MERGE_REQUESTS: Pre-pipeline

A comma-separated list of up to four merge requests that use the current branch and project as the merge request source.
Only available in branch and merge request pipelines if the branch has an associated merge request. For example, gitlab-org/gitlab!333,gitlab-org/gitlab-foss!11

Set Up Rules How Pipelines Get Triggered

Here, we are setting up some rules on how pipelines get triggered, depending on what triggered them.

workflow:
  rules:
    - if: $CI_PIPELINE_SOURCE == "web"
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"
    - if: $CI_COMMIT_BRANCH && $CI_OPEN_MERGE_REQUESTS
      when: never
    - if: $CI_COMMIT_BRANCH

stages:
  - quality
  - test
  - report

Pipeline started manually via the web? Run the pipeline immediately.
Triggered by a Merge Request event creating an MR or pushing a fix to an open MR? Run the pipeline as a detached merge request pipeline.
Is this a regular branch commit AND does the branch have an open merge request? Well, we don't want two pipelines spun up. Don't run the branch. The MR branch will handle it.
Is this a standard commit push to any branch, and does it clear the previous rule? Run a regular branch pipeline.

Define Two Templates: Bun_Quality and Playwright

Like earlier, we are building out two GitLab CI/ CD stages:

.bun_quality and .bun_playwright

The dot "." before the name hides the stages, making them to be good when trying to set up templates that can be followed when setting up what needs to happen before the script in that stage is run.

.bun_quality:
  image: oven/bun:1.3.14
  before_script:
    - bun --version
    - bun install --frozen-lockfile

.bun_playwright:
  image: mcr.microsoft.com/playwright:v1.62.1-noble
  before_script:
    - apt-get update && apt-get install -y unzip curl
    - curl -fsSL https://bun.com/install | bash -s "bun-v1.3.14"
    - export PATH="$HOME/.bun/bin:$PATH"
    - bun --version
    - bun install --frozen-lockfile

The .gitlab-ci.yml file then sets up:

Quality stage to run format, lint, and typecheck, while the Playwright

... But the stage running the Playwright tests will be slightly different.

Set Up New Stage When Pipeline is Manually Triggered

Running Playwright tests will be slightly different between one that was kicked off by pushing code to the repository and one that was manually kicked off when creating a new pipeline.

If a developer went to Pipelines -> New Pipeline on the web, we do NOT want this stage run.

playwright:
  extends: .bun_playwright
  stage: test
  timeout: 30 minutes
  rules:
    - if: $CI_PIPELINE_SOURCE == "web"
      when: never
    - when: on_success
  script:
    - bun run test:smoke
    - bun run test
  artifacts:
    when: always
    paths:
      - playwright-report/
      - test-results/
      - reports/
    reports:
      junit: reports/junit/results.xml
    expire_in: 30 days

We want a whole new stage to be run, one where we gather the inputs the user has defined and given value.

playwright:manual:
  extends: .bun_playwright
  stage: test
  timeout: 30 minutes
  rules:
    - if: $CI_PIPELINE_SOURCE == "web"
      when: on_success
    - when: never
  variables:
    BROWSER: "$[[ inputs.browser ]]"
    SUITE: "$[[ inputs.suite ]]"

Although both have the same .bun_playwright setup, the playwright one will run all smoke then all tests on all browsers. The playwright:manual will be gathering as variables the inputs.browser and inputs.suite the developer selected.

The playwright one will exclude anything triggered by the web as a rule, the one we set.

The playwright: manual one will exclude anything that is not manual.

Add Collected Variables To The Script Running Tests

Now that we have collected all the variables needed from the user, we can start using them to execute our test scripts.

script:
    - |
      PROJECT_ARG=""
      if [ "$BROWSER" != "all" ]; then
        PROJECT_ARG="--project=$BROWSER"
      fi
      SUITE_ARG=""
      if [ "$SUITE" != "all" ]; then
        SUITE_ARG="tests/$SUITE"
      fi

      echo "Running: bun run test -- $PROJECT_ARG $SUITE_ARG"
      bun run test -- $PROJECT_ARG $SUITE_ARG

If the user selected "all" browsers and "all" suites, it will kick off all tests, running them against the feature branch selected, with the command: bun run test.
If the user selected "chromium" and "login.spec.ts", then that will be passed into the command: bun run test -- --project=chromium --tests/login.spec.ts

This way, a developer can test out their feature branch before they put in a merge request.

Next, we will be examining how to publish the reports on GitLab Pages.

Bun Create Playwright:

Part One: Introducing bun, a new package manager and JavaScript runtime environment
Part Two: What happens when you scaffold a Playwright framework and run installed tests using bun?
Part Three: Add Type Checking and TSConfig to Bun-Create-Playwright
Part Four: Checking code with lint, formatting it with prettier
Part Five: Running Tests with Playwright Test Explorer and Generating Tests with Codegen
Part Six: How Playwright Frameworks get configured with playwright.config.ts
Part Seven: Implementing Page Objects in Playwright
Part Eight: How to Configure Playwright Test to run smoke tests, headed tests, and debug versions through scripts in package.json
Part Nine: Setting up a CI/ CD pipeline with GitLab: Quality, Test and Report
Part Ten: How Developers Can Test Their Feature Branch Against Various Playwright Configurations Before Creating a Merge Request in GitLab CI/CD
Part Eleven: Examining the artifacts job of a Playwright GitLab CI / CD pipeline
Part Twelve: Publishing Playwright HTML reports on GitLab Pages
GitLab: https://gitlab.com/tjmaher/bun-create-playwright

Until then, Happy Testing!

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles

Setting up a CI/ CD pipeline with GitLab: Quality, Test and Report

2026-08-24T22:28:52.253-04:00

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 repository root and turns it into a pipeline, a set of jobs, grouped into stages, running whenever you push a change to a repository.

Stages run one after another, and jobs within a stage run in parallel. If one stage fails, the stages after it are skipped.

This begs the question: What is GitLab? What is CI/ CD? Or a pipeline? Or a merge request?

What is GitLab?

GitLab began in 2011 as a side project by Ukrainian programmer Dmytro Zaporozhets, built to help developers work together on code more easily. Over time, it grew into a large open-source DevOps platform. More than just storing code, it handles code reviews, CI/CD (continuous integration and continuous delivery), and package registries. A company called GitLab Inc. was eventually created to turn the project into a commercial product.

What makes GitLab different from tools that only host Git repositories (like a basic Git server) is that it bundles the entire software delivery process into one application. This includes:

Merge requests – GitLab's term for proposing and reviewing code changes before they're merged into the main codebase (similar to a "pull request" in GitHub)
Issue tracking – a built-in system for logging bugs, tasks, and feature requests
Pipelines – automated workflows that build, test, and deploy code whenever changes are pushed

So instead of stitching together separate tools for version control, testing, and deployment, GitLab gives you all of it in one place.

Isn't That Just GitHub?

According to GitLab's "What are the fundamental differences between GitLab and GitHub", "GitHub's security scanning, AI, and advanced CI/CD are native but sold as separate paid add-ons on top of the base platform price [...] GitLab puts planning, source code, CI/CD, security, and deployment into a single application with one permission model, one audit trail, and shared analytics. That means fewer tools to run, fewer integrations to maintain, and one place to apply policies and AI across the whole lifecycle".

GitLab calls all the extra stuff you need to purchase from GitHub a "toolchain tax".

What is CI/ CD?

"CI/CD stands for Continuous Integration and Continuous Delivery (or Deployment). It's a DevOps practice that automates building, testing, and deploying code changes, enabling faster and more reliable software releases.

"CI/CD is best explained as an automated workflow that replaces manual steps with pipelines that build, test, and deploy software reliably.

"CI/CD falls under DevOps (the joining of development and operations teams) and combines the practices of continuous integration and continuous delivery. CI/CD automates much or all of the manual human intervention traditionally needed to get new code from a commit into production, encompassing the build, test (including integration tests, unit tests, and regression tests), and deploy phases, as well as infrastructure provisioning.

"With a CI/CD pipeline, development teams can make changes to code that are then automatically tested and pushed out for delivery and deployment. Get CI/CD right and downtime is minimized and code releases happen faster" - GitLab.com / What is CI / CD?

What are CI/ CD Pipelines?

"A CI/CD pipeline is an automated process utilized by software development teams to streamline the creation, testing and deployment of applications.

"CI represents continuous integration, where developers frequently merge code changes into a central repository, allowing early detection of issues. CD refers to continuous deployment or continuous delivery, which automates the application's release to its intended environment, ensuring that it is readily available to users. This pipeline is vital for teams aiming to improve software quality and speed up delivery through regular, reliable updates.

"Integrating a CI/CD pipeline into your workflow significantly reduces the risk of errors in the deployment process. Automating builds and tests ensures that bugs are caught early and fixed promptly, maintaining high-quality software". - GitLab.com / What is CI / CD?

Just like GitHub, GitLab is free to join, hoping people will use the platform and decide to subscribe for more of its services.

With GitLab you can take your changes you want to make to the codebase of the code repository, try to commit the changes, and make a request to merge the changes into the main branch.

You can set up the CI/ CD pipeline that before a senior developer looks at your merge request to see if it can be approved, the merge request gets tested right when it gets created.

How Do You Create a Merge Request?

Let's say you want to make a change to a code repository to bun-create-playwright.

First, if you haven't already, you need to pull down the code repo:

Do you have Git? Open PowerShell or the Terminal, whatever is your Command Line Interface for the PC or the Mac, and run: git --install.
If you do not have git, install it on you Windows machine or MacBook.
Get the code repository: git clone git@gitlab.com:tjmaher/bun-create-playwright.git

Already downloaded the repo, and want to make sure you have the latest version?

git fetch origin
git checkout main
git pull origin main

Ready to make some updates?

git checkout -b feature/my-new-change

Then make your changes. After that is done, add your changes and create a commit for your changes:

git status // All your files you made changes to are listed in red, since they are unstaged.
git .add
git status // All your changes are now listed in green. They are staged.
git commit -m "This is my commit!"

Changes all set? Push the changes to your remote repo:

git push -u origin features/my-new-change

Now, you will see a URL pointing exactly to the link where you can see your commit in GitLab. Select the button, "Create Merge Request".

Once you that, the Merge Request will be created, and will be run automatically on the GitLab CI/ CD pipeline.. once we create one.

Create the Configuration File For a CI/ CD Pipeline

Want to practice the basics? See Tutorial: Create and run your first GitLab CI/CD pipeline
This walks you through creating a public project, setting up a test runner, and creating a .gitlab-ci.yml file in your root directory, and running a job.

Here, we are going to start reviewing the sample .gitlab-ci.yml file I created for Bun-Create-Playwright, the configuration file used when creating a new pipeline that will process the changes we have made to the code base.

bun-create-playwright / .gitlab-ci.yml

stages:
  - quality
  - test
  - report

https://gitlab.com/tjmaher/bun-create-playwright/-/blob/main/.gitlab-ci.yml

For any CI / CD pipeline created when a merge request is pushed, we are setting up four stages:

Quality: Where we check the format using Prettier, run the linter allowing no warnings to sneak by, and run the TypeScript compiler to do type checking. This stage takes seconds to run.
Test:

We run just the one smoke test on Chromium, checking that we can log into the Login page.
Is the smoke test successful? We then will run ALL the tests, positive and negative, on every platform, on Chrome, Firefox, and WebKit / Safari.

Report: Create a report we can download and examine.

Hidden Jobs: The Quality Template

If we take a GitLab job, and add a dot to the name, it becomes a "hidden" job. Let's say that you have a stage called QUALITY, and you have a substage which checks the format of the code, a substage that runs a linter on the code, and a substage that type checks the code.

Each substage might need to have the same things added to it, such as using the same pre-configured Docker image for bun, version 1.3, so you don't have to manually install bun, its version managers or system libraries.

Or you could take the lockfile as is, produced when dependencies are installed, and use that same exact version on all three substages.

That ,bun_quality could act as a template that could be extended into all three substages.

.bun_quality:
  image: oven/bun:1.3
  before_script:
    - bun --version
    - bun install --frozen-lockfile

Docker is a tool that packages your code and everything it needs -- like libraries and system tools -- into a single box called a container. This container runs the exact same way on your laptop, your teammate's computer, and the cloud server, fixing the classic "it works on my machine" problem

Docker Hub is a public cloud-based registry service and community library of Docker images.

Bun, the package manager, has a Docker Hub it has dubbed "oven". Here, we are going to be using the Docker image of Bun version 1.3.

Before we run any of the substages -- format, lint, or typecheck -- we will in all stages check the version of bun used, print it out to the log file, then install bun using the Bun 1.3 Docker image, from a frozen lockfile.

A lockfile is a "file that lists the direct and indirect dependencies of an application and their version numbers. Its purpose is reproducibility, to ensure anyone installing the application’s dependencies gets the exact same versions". ( GitLab / Terminology Lockfile )
By installing a frozen lockfile, we are locking down all package dependencies in our jobs so we will use the same exact version in all three cases. If the lock file is out of sync from package.json, we will have it fail instead of it silently updating.

By having it frozen, we can guarantee reproducible builds and catch cases where a dependency was added/changed without committing the updated lockfile.

The Quality Stage

Now that we set up the quality template, we can use it for the substages: format, lint, and typecheck.

format:
  extends: .bun_quality
  stage: quality
  script:
    - bun run format:check

lint:
  extends: .bun_quality
  stage: quality
  script:
    - bun run lint:ci

typecheck:
  extends: .bun_quality
  stage: quality
  script:
    - bun run typecheck

Need to add another part to the quality stage? You can just declare it, extending the same template, designating the stage, and adding the script you want to run.

Back in the post How to Configure Playwright Test to run smoke tests, headed tests, and debug versions through scripts in package.json we set up the following scripts:

Format:check throws an error when Prettier finds a formatting style error while running the script: "prettier --check ."
Lint:ci uses ES Lint to see if the code has an errors with the script: "eslint . --max-warnings 0"
Typecheck uses the TypeScript compiler to see if there an errors, running: "tsc --noEmit"

This CI Pipeline will execute these three stages. Any errors detected? The build pipeline will be halted.

Introducing: The Official Playwright Docker Image

This GitLab pipeline when running tests, will use the official Docker image that Microsoft has released to run Playwright tests: mcr.microsoft.com/playwright:v1.62.1-noble

Microsoft stores its Docker images in the Microsoft Artifact Registry under the Playwright subfolder at at https://mcr.microsoft.com/en-us/artifact/mar/playwright

The Docker image uses the Ubuntu 24.04 LTS (Noble Numbat) operating system.

Hidden Jobs: The Test Template, Run on Playwright Docker

Just like the Quality stage, the Test stage will receive its own template to be used in its substages.

And, just like the Quality stage, to make sure that each substage is on the same page, we will be using a Docker environment. The Docker image we will be using is Microsoft's official Docker environment for Playwright.

.bun_playwright:
  image: mcr.microsoft.com/playwright:v1.62.1-noble
  before_script:
    - apt-get update && apt-get install -y unzip curl
    - curl -fsSL https://bun.sh/install | bash
    - export PATH="$HOME/.bun/bin:$PATH"
    - bun --version
    - bun install --frozen-lockfile

From Playwright.dev / Docker: "Dockerfile.noble can be used to run Playwright scripts in Docker environment. This image includes the Playwright browsers and browser system dependencies".

Using this image in your CI/CD pipeline guarantees a stable, pre-configured, and reproducible environment for running your automated tests

After that, we are using APT, the Advanced Package Tool to refresh the container's package index, then install unzip and curl.

Once curl is installed, we download Bun's official install script (See Bun.sh / Installation ) and pipes it directly into bash to execute. The flags:

-f fails silently on server errors instead of printing an HTML error page
-s runs silently (no progress meter)
-S re-enables error messages even in silent mode
-L follows redirects.

This installs the Bun binary into ~/.bun/bin.

Then we export bun's install directory to the shell's PATH for the current job session, since the install script doesn't automatically make bun available in a fresh shell (it normally edits .bashrc/.zshrc for interactive shells, which CI runners don't source the same way).

Did everything work?

Print the installed Bun version to the job log. This confirms the install succeeded (the job fails fast here if bun isn't on PATH), and leaves a version record in the CI logs for debugging.

Finally we install the project's dependencies using Bun's package manager. --frozen-lockfile tells Bun to install exactly what's in bun.lock (or bun.lockb) and fail the build if the lockfile is out of sync with package.json, rather than silently updating it, which is the standard practice for CI to guarantee reproducible builds.

Whew! And this will happen on every substage in Test.

The Test Stage

Now, we set up the test stage, first running all tests we have tagged with "@smoke". If that passes, we run ALL the tests.

Everything we set up in .bun_playwright gets pulled right into this GitLab CI job.

playwright:
  extends: .bun_playwright
  stage: test
  timeout: 60 minutes
  script:
    - bun run test:smoke
    - bun run test
  artifacts:
    when: always
    paths:
      - playwright-report/
      - test-results/
      - reports/
    reports:
      junit: reports/junit/results.xml
    expire_in: 30 days

After the clock starts, we are giving it one full hour for all the tests to run.

Assemble the Artifacts!

Whether the jobs pass or fail, we are going to create a report so we can audit the test. We are placing the items produced in:

playwright-report/: This directory holds the main interactive HTML report. It includes the index.html file that lets you visually click through test suites, read error logs, and see execution timelines.
test-results/: This folder stores the raw individual assets captured during test execution. If a test fails, Playwright drops failure screenshots, video recordings of the browser screen, and .zip trace files (which allow you to step through the test execution like a video) into this directory
reports/: This is a catch-all or customized directory often used for alternative report formats. It holds JUnit XML files meant to be parsed directly by your CI platform to display a quick test summary on your pull/merge request page

The Report Stage

On the report stage, we are using a lightweight Linux container called "alpine" to execute the commands quickly. We don't need pre-installed browsers or a JavaScript runtime environment. These reports will be generated whether the tests pass or fail.

This job will be started right after the "playwright" job finishes in the Test stage.

report:
  stage: report
  image: alpine:latest
  when: always
  needs:
    - job: playwright
      artifacts: true
  script:
    - ls -la playwright-report/ test-results/ reports/junit/ || true
  artifacts:
    when: always
    paths:
      - playwright-report/
      - test-results/
      - reports/
    reports:
      junit: reports/junit/results.xml
    expire_in: 30 days

Next, we have the script, where we are going to list the contents of our test results directory. The "-la" will even list the hidden directories that might exist.

Even if one of the directories do not exist, we still want to carry on, which is why we are appending "OR TRUE" to the script.

Finally, we add the reports and XML file to GitLab's servers.

View The Results

There you have it! Now, when you push changes, your code can be checked for quality, and you can make sure the tests all actually run.

Each code change, each merge request, generates a new pipeline. You can view it at https://gitlab.com/tjmaher/bun-create-playwright/-/pipelines

You can also download the reports:

Test Report Artifacts

report:archive: Contains the full, human-readable HTML test reports (like Allure, if set up, or Playwright's native HTML report) compressed into a zip archive.
report:junit: Contains a structured XML file in the JUnit format used by CI/CD platforms to parse, count, and display test success rates directly in the pipeline UI.

Playwright Specific Artifacts

playwright:archive: Stores heavy debugging assets generated during test failures, such as recorded videos, browser screenshots, and .zip trace files that you can load into the Playwright Trace Viewer.
playwright:junit: Holds the specific JUnit-formatted XML results generated directly by the Playwright test runner (@playwright/test) during execution.

You can also drill down into the pipeline to see each stage's results.

With each stage, you can drill down to see the log files for that stage.

And, last of all, you can download an HTML version of the report, in the archive of artifacts.

That's how you set up a GitLab CI/ CD pipeline!

Next, we are going to look into manually kicking off a job, viewing a report on GitLab Pages.

Bun Create Playwright:

Part One: Introducing bun, a new package manager and JavaScript runtime environment
Part Two: What happens when you scaffold a Playwright framework and run installed tests using bun?
Part Three: Add Type Checking and TSConfig to Bun-Create-Playwright
Part Four: Checking code with lint, formatting it with prettier
Part Five: Running Tests with Playwright Test Explorer and Generating Tests with Codegen
Part Six: How Playwright Frameworks get configured with playwright.config.ts
Part Seven: Implementing Page Objects in Playwright
Part Eight: How to Configure Playwright Test to run smoke tests, headed tests, and debug versions through scripts in package.json
Part Nine: Setting up a CI/ CD pipeline with GitLab: Quality, Test and Report
Part Ten: How Developers Can Test Their Feature Branch Against Various Playwright Configurations Before Creating a Merge Request in GitLab CI/CD
Part Eleven: Examining the artifacts job of a Playwright GitLab CI / CD pipeline
Part Twelve: Publishing Playwright HTML reports on GitLab Pages
GitLab: https://gitlab.com/tjmaher/bun-create-playwright

Until then, Happy Testing!

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles

How to Configure Playwright Test to run smoke tests, headed tests, and debug versions through scripts in package.json

2026-08-19T22:13:32.812-04:00

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 "bun run", a space and then the shortcut such as: bun run test

package.json

"scripts": {
    "test": "playwright test",
    "test:headed": "playwright test --headed",
    "test:trace": "playwright test --trace on",
    "test:chromium": "playwright test --project=chromium",
    "test:firefox": "playwright test --project=firefox",
    "test:webkit": "playwright test --project=webkit",
    "test:smoke": "playwright test --project=chromium --grep '@smoke'",
    "test:flaky": "playwright test --project=chromium --repeat-each=20",
    "test:ui": "playwright test --ui",
    "test:debug": "playwright test --debug",
    "test:failed": "playwright test --last-failed",
    "test:login": "playwright test tests/login.spec.ts",
    "test:secure-area": "playwright test tests/secure-area.spec.ts",
    "report:list": "playwright test --reporter=list",
    "report:line": "playwright test --reporter=line",
    "report:dot": "playwright test --reporter=dot",
    "report:blob": "playwright test --reporter=blob",
    "report": "playwright show-report",
    "codegen": "playwright codegen",
    "lint": "eslint .",
    "lint:ci": "eslint . --max-warnings 0",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "format:debug": "prettier --check . --log-level debug",
    "format:diff": "prettier --list-different",
    "typecheck": "tsc --noEmit"
  },

bun-create-playwright / package.json

Do you need to really set up shortcuts like these? Certainly not! But it is easier than typing out: bunx playwright test --project=chromium --grep '@smoke'.

Feel free to name these commands anything you want!

You Can Run Scripts in Bunx? What is Bunx?

When you install Node.js, you are installing Node Package Execute (npx) a package runner that lets you auto-install and execute any npm packages on the fly. "This command allows you to run an arbitrary command from an npm package (either one installed locally, or fetched remotely), in a similar context as running it via npm run" ( NPMJS.com Docs / npx ).

Bunx is part of bun.sh, auto-installs and runs packages from npm... and claims to be 100x faster than npx for locally installed packages, like the Playwright test runner (bun.com Docs / bunx ).

If you have the package.json set up like above, bun run test would do the same thing as bunx playwright test... but with a lot less typing.

What is a Package.json file?

Before Node.js had NPM as a package manager, there was CommonJS that tried to standardize how server-side JavaScript applications should interact with the operating system. Back in 2009, it gave JavaScript the ability to manage dependencies. It could require() outside packages to be installed. The CommonJS Packages 1.1 specification introduced a "scripts" block, an "Object hash of scripts used in managing the package. A package manager tool may use these scripts to install, build, test or uninstall the package", as shown in the CommonJS Wiki / 1.1.

When Issac Schlueter created npm, he adopted CommonJS's package.json terminology, turning the scripts block into general task runners.

Read more on Increment.com / Interview with Isaac Z. Schlueter, CEO of npm

Because of that, with Package.json scripts, you can include a whole library of functionality!

Setting Up Scripts To Run and Debug Tests

"With Playwright you can run a single test, a set of tests, or all tests. Tests can be run on one browser or multiple browsers using the --project flag. Tests run in parallel by default and in headless mode, meaning no browser window opens while running the tests and results appear in the terminal. You can run tests in headed mode using the --headed CLI argument, or run your tests in UI mode using the --ui flag to see a full trace of your tests.

"[...] You can run your tests with the playwright test command. This runs your tests on all browsers as configured in the playwright.config file, and results appear in the terminal. Tests run in headless mode by default, meaning no browser window opens while running the tests". - https://playwright.dev/docs/running-tests

Note that on Playwright.dev / Running and debugging tests it assumes you are using node, and instructs you to use "npx playwright test". If using bun as a package manager, use "bunx playwright test" to run tests from the command line interface.

Run Tests in UI Mode

"We highly recommend running your tests with UI Mode for a better developer experience where you can easily walk through each step of the test and visually see what was happening before, during and after each step. UI mode also comes with many other features such as the locator picker, watch mode and more". - Playwright.dev / Running and debugging tests

"UI Mode lets you explore, run, and debug tests with a time travel experience complete with a watch mode. All test files are displayed in the testing sidebar, allowing you to expand each file and describe block to individually run, view, watch, and debug each test. Filter tests by name, projects (set in your playwright.config file), @tag, or by the execution status of passed, failed, and skipped. See a full trace of your tests and hover back and forward over each action to see what was happening during each step. You can also pop out the DOM snapshot of a given moment into a separate window for a better debugging experience". - Playwright.dev / UI Mode

Review Playwright.dev / UI Mode to learn about running your tests, filtering tests. seeing the Timeline view at the top of the trace, the Actions tab in UI view, how to inspect the DOM, pick a locator, view the source, see the action called, the full log of the test, errors, the console logs, network tab, attachments if doing visual regression testing, and watch mode.

You can even run UI Mode in the browser for Docker and GitHub Codespace environments with "npx playwright test --ui-host=0.0.0.0" to have the port forwarded automatically, or "npx playwright test --ui-port=8080 --ui-host=0.0.0.0" to set the port.

Run Tests in Headed Mode

"To run your tests in headed mode, use the --headed flag. This gives you the ability to visually see how Playwright interacts with the website".

Run tests on different browsers

"To specify which browser you would like to run your tests on, use the --project flag followed by the browser name.

bunx playwright test --project webkit

"To specify multiple browsers to run your tests on, use the --project flag multiple times followed by each browser name".

bunx playwright test --project webkit --project firefox

Run specific tests

"To run a single test file, pass in the test file name that you want to run.

bunx playwright test landing-page.spec.ts

"To run a set of test files from different directories, pass in the directory names that you want to run the tests in.

bunx playwright test tests/todo-page/ tests/landing-page/

"To run files that have landing or login in the file name, simply pass in these keywords to the CLI.

bunx playwright test landing login

"To run a test with a specific title, use the -g flag followed by the title of the test".

bunx playwright test -g "add a todo item"

Run last failed tests

"To run only the tests that failed in the last test run, first run your tests and then run them again with the --last-failed flag.

bunx playwright test --last-failed

"Playwright stores the list of failed tests from the previous run in <outputDir>/.last-run.json (see testConfig.outputDir). To use a different file path, pass --last-failed-file=<path> or set PLAYWRIGHT_LAST_RUN_OUTPUT_FILE".

Debug tests with the Playwright Inspector

"To debug all tests, run the Playwright test command followed by the --debug flag.

bun playwright test --debug

"This command opens a browser window as well as the Playwright Inspector. You can use the step over button at the top of the inspector to step through your test. Or, press the play button to run your test from start to finish. Once the test finishes, the browser window closes.

"To debug one test file, run the Playwright test command with the test file name that you want to debug followed by the --debug flag.

bun playwright test example.spec.ts --debug

"To debug a specific test from the line number where the test(.. is defined, add a colon followed by the line number at the end of the test file name, followed by the --debug flag".

bun playwright test example.spec.ts:10 --debug

Read more at Playwright.dev / Debugging Tests

Bun Create Playwright:

Part One: Introducing bun, a new package manager and JavaScript runtime environment
Part Two: What happens when you scaffold a Playwright framework and run installed tests using bun?
Part Three: Add Type Checking and TSConfig to Bun-Create-Playwright
Part Four: Checking code with lint, formatting it with prettier
Part Five: Running Tests with Playwright Test Explorer and Generating Tests with Codegen
Part Six: How Playwright Frameworks get configured with playwright.config.ts
Part Seven: Implementing Page Objects in Playwright
Part Eight: How to Configure Playwright Test to run smoke tests, headed tests, and debug versions through scripts in package.json
Part Nine: Setting up a CI/ CD pipeline with GitLab: Quality, Test and Report
Part Ten: How Developers Can Test Their Feature Branch Against Various Playwright Configurations Before Creating a Merge Request in GitLab CI/CD
Part Eleven: Examining the artifacts job of a Playwright GitLab CI / CD pipeline
Part Twelve: Publishing Playwright HTML reports on GitLab Pages
GitLab: https://gitlab.com/tjmaher/bun-create-playwright

Happy Testing!

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles

Implementing Page Objects in Playwright

2026-08-16T18:04:38.139-04:00

Picture a login screen, such as The-Internet / Login.

On this LoginPage, there is:

a heading: Login Page
a user name textbox with the label, "Username"
a password textbox with the label, "Password"
a login button, with the role of a button, and the name of "Login"
a flash message that appears if you enter invalid credentials such as "NotAUser" and "NotAPassword".

If you successfully log in with "tomsmith" and "SuperSecretPassword!, there is a SecureArea:

a heading: "Secure Area"
a flash message "You logged into a secure area!"
a Logout button.

Sure, you could interact with each web element in your test... but what if the username text box locator changes? You would have to update multiple tests every time the element changed.

... Instead, you could place it in a Page Object, something that Playwright handles well!

"A page object represents a part of your web application. An e-commerce web application might have a home page, a listings page and a checkout page. Each of them can be represented by page object models.

"Page objects simplify authoring by creating a higher-level API which suits your application and simplify maintenance by capturing element selectors in one place and create reusable code to avoid repetition".

Using Playwright's Built-In Test Runner? Or Something Else?

You may have noticed in https://playwright.dev/docs/pom that there are two different styles of page objects. One for "Test". One for "Library".

Test: If you are writing actual Playwright test suites, and Playwright's built in test runner, use the Test section as a guide when creating page objects.
Library: If you are integrating Playwright into an existing test framework such as Jest or Cucumber and just want browser automation, instead of having pre-built page fixtures, etc, you can use this format.

Setting Up Page Objects

Let's review a page object I created for the main login page on my GitLab account for the bun-create-typescript project, tests/pages/LoginPage.ts.

The first thing we do is import the Locator method and Page fixture from the Playwright Test library.

import { type Locator, type Page } from "@playwright/test";

According to Playwright.dev / Class-Fixtures, "Playwright Test is based on the concept of the test fixtures. Test fixtures are used to establish environment for each test, giving the test everything it needs and nothing else.

"Playwright Test looks at each test declaration, analyses the set of fixtures the test needs and prepares those fixtures specifically for the test. Values prepared by the fixtures are merged into a single object that is available to the test, hooks, annotations and other fixtures as a first parameter [...]

"Playwright Test will set up the page fixture before running the test, and tear it down after the test has finished. page fixture provides a Page object that is available to the test".

The Page and Locator Class

According to Playwright.dev / Page, "Page provides methods to interact with a single tab in a Browser, or an extension background page in Chromium. One Browser instance might have multiple Page instances.". These pages are isolated from each other, created for each test. The page fixtures have their own setup and teardown methods, such as opening up a new browser before a test starts, and closing a browser when a test ends.

According to Playwright.dev / Locators, "Locators are the central piece of Playwright's auto-waiting and retry-ability. In a nutshell, locators represent a way to find element(s) on the page at any moment". The built-in Playwright locators are:

page.getByRole() to locate by explicit and implicit accessibility attributes.
page.getByText() to locate by text content.
page.getByLabel() to locate a form control by associated label's text.
page.getByPlaceholder() to locate an input by placeholder.
page.getByAltText() to locate an element, usually image, by its text alternative.
page.getByTitle() to locate an element by its title attribute.
page.getByTestId() to locate an element based on its data-testid attribute (other attributes can be configured).

Define the Page Object Class

Now that we have imported the Page and Locator class from Playwright, we can define the LoginPage page object class.

export class LoginPage {
  readonly page: Page;
  readonly usernameInput: Locator;
  readonly passwordInput: Locator;
  readonly loginButton: Locator;
  readonly alertMessage: Locator;
  readonly heading: Locator;

Here, we are declaring LoginPage as a Page class, and creating Locator objects that will find and point to the username and password textboxes, the login button, the alertMessage, and the heading.

Initialize the Page Object Class

Now that we have defined the page object, we can initialize a constructor for the page, setting up reusable locators for all the web elements we defined.

  constructor(page: Page) {
    this.page = page;
    this.usernameInput = page.getByLabel("Username");
    this.passwordInput = page.getByLabel("Password");
    this.loginButton = page.getByRole("button", { name: "Login" });
    this.alertMessage = page.locator("#flash");
    this.heading = page.getByRole("heading", { name: "Login Page" });
  }

The textboxes are labeled "Username" and "Password". If we know that these labels are not expected to change, we can use the labels as a locator strategy.
The login button, we can use as a locator strategy its role "button" and the name "Login".
The alert message is tricky. Here, we can grab the id, "#flash", in the locator.
The heading, we can also get by role of "heading", and name of "Login Page".

Navigate to the Login Page

Let's embed in this Login Page Object a way to navigate to the Login page.

  async navigate(): {
    await this.page.goto("/login");
  }

Here, we have defined a method in the LoginPage page object our tests can use.

In our playwright.config.ts (see code in GitLab) we have already declared our baseURL to be https://the-internet.herokuapp.com, which will display when a new browser window is opened when a new test starts.

When in our test we instantiate a new LoginPage method, and call the navigate method, it will goto "login".

async has been placed before the function definition, since the browser will not be happening instantly. Actions will be happening asynchronously, all at the same time. It returns a "Promise" object.
await can be used inside an aync function. It tells the program to pause execution until the slow action, such as loading a webpage is finished.

What is a Promise? "A Promise is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason. This lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future". - Developer.Mozilla.com / JavaScript / Promise.

What is Asynchronous Programming in JavaScript? "JavaScript, especially when running in a web browser environment, has a unique challenge. It's single-threaded, meaning it has one line of execution at a time. If any task (fetching data, responding to a button click, etc.) takes a long time, it would freeze the entire webpage!

"Asynchronous programming is the pattern to tackle this. It enables us to start a potentially long-running operation and tell JavaScript, 'Go about your business, I'll let you know when this is ready.' This prevents the webpage from locking up.

"[...] JavaScript async await lets us write asynchronous code that resembles the style of straightforward, step-by-step (synchronous) code. This often makes the logic much easier to follow.- Upgrad.com / tutorials / JavaScript aync-await.

Creating a LoginAs Method

Sure, we could fill in the username, fill in the password, and click the login button, but what if that login procedure changes? We would have to hunt down every time we logged into the app, and make the changes in the test.

There is a software design principle called DRY: Don't Repeat Yourself, first coined by Andy Hunt and Dave Thomas in their book "The Pragmatic Programmer: From Journeyman to Master (1999)" (See Wikipedia, and the interview with both authors on YouTube at GoTo Conference 2020).

Instead, we could create a new async method called "loginAs" where we pass in the username and password.

  async loginAs(username: string, password: string): {
    await this.usernameInput.fill(username);
    await this.passwordInput.fill(password);
    await this.loginButton.click();
  }

Both "fill" and "click" are Playwright actions ( See docs ).

Text input can use locator.fill.
Checkboxes and radio buttons can .check them off, then expect them .toBeChecked.
Multiple radio buttons can be .selectOptions by value or label.
Mouse clicks can be performed with a mouse click, a double mouse click, a right click, a shift click, or a control click.
You can press keys such as .press('Enter'), or .press('Control+ArrowRight').
You can also press keys such as Backquote, Minus, Equal, Backslash, Backspace, Tab, Delete, Escape, ArrowDown, End, Enter, Home, Insert, PageDown, PageUp, ArrowRight, ArrowUp, F1 - F12, Digit0 - Digit9, KeyA - KeyZ, etc
You can .dragAndDrop, and explicitly .scrollIntoViewIfNeeded().

We have the locator, such as this.usernameInput, that we have declared, so now we can perform an action on the locator.

Get Text From Web Elements

Need to get text from an element such as an alert message or a heading? Using a locator, you can retrieve the innerText property of the web element. According to Mozilla Org / HTMLElement / innerText, "As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard".

  async getAlertMessage() {
    return (await this.alertMessage.innerText()).trim();
  }

Once we get the text of the web element, there may be hidden whitespaces in the text. "The trim() method of String values removes whitespace from both ends of this string and returns a new string, without modifying the original string". - Mozilla.Org / String / Trim

  async getHeading() {
    return (await this.heading.innerText()).trim();
  }

After getting the text and trimming it, we return it to our test function.

We could have set up the page objects to expect the correct heading or alert message is correct, sending to the method what should be expected... but I try to avoid this whenever possible.

Personally, I prefer to keep the assertions, the things we are testing for, in the actual test and out of the page object.

Setting Up Test Data

Yes, with just one set of valid credentials, separating them into a JSON file is overkill... but what if there were hundreds of valid test users? Here we are placing them into a JSON (JavaScript Notation) file called credentials with two top level objects... valid, and invalid.

In them, we have two key-value pairs in each object, username and password.

tests/ data/ credentials.json

{
  "valid": {
    "username": "tomsmith",
    "password": "SuperSecretPassword!"
  },
  "invalid": {
    "username": "NotAUser",
    "password": "NotAPassword"
  }
}

Need to add or change usernames and passwords?

No need to hunt through test data. Change just what is in the credentials file, and everything else will be reset. ( See this code in GitLab bun-create-playwright. )

Setting Up The Tests

Tests are set up in the Arrange / Act / Assert fashion, the pattern first mentioned by software developer Bill Wake in 2001 regarding the Extreme Programming movement (See XP123 / 3a- Arrange, Act. Assert ).

Arrange: Get the test data, open the browsers
Act: Navigate to the page and login
Assert: Do we have the proper heading ("Secure Area"), url, and alert message that we have logged into a secure area?

Finally, it's time to write our first test suite! Note: This code is in the GitLab project bun-create-playwright, under tests/login.spec.ts.

import { test, expect } from "@playwright/test";
import { LoginPage } from "./pages/LoginPage";
import { SecurePage } from "./pages/SecureAreaPage";
import credentials from "./data/credentials.json" with { type: "json" };
import messages from "./data/messages.json" with { type: "json" };

We are now importing files into our test and setting up variables to store the information such as:

The "test" and "expect" methods from Playwright.
The LoginPage and SecureAreaPage page objects we have set up.
The credentials stored in a JSON file that we have gone over.
A separate json file that stores all messages such as "You logged into a secure area!"

Set Up Constants for the Test Suite

test.describe("Login", () => {
  const validUser = credentials.valid.username;
  const validPassword = credentials.valid.password;
  const invalidUser = credentials.invalid.username;
  const invalidPassword = credentials.invalid.password;

Here, we are setting up a describe block, one of the methods in Playwright Test, declaring a group of tests, giving the test the title of "Login".

Then, to make the test more readable, instead of passing a three part credentials call, I am storing them in appropriately named variables.

These variables, validUser, validPassword, etc, we are declaring as type "const", also known as constants. If we accidentally change these values when the test is running, an error will be thrown. (Read more at TypeScript.org / Handbook / Variable Declarations ).

These constants, since they are set up in the describe block, will be set for ALL of the tests in this test suite.

Set Up the Individual Test

Let's set up a test that we can actually log in, and get to the secure area page, and call it "successful login with valid credentials".

  test("successful login with valid credentials", {
    tag: "@smoke",
  }, async ({ page }) => {
    const loginPage = new LoginPage(page);
    const securePage = new SecurePage(page);

    await loginPage.navigate();
    await loginPage.loginAs(validUser, validPassword);

We instantiate a new instance of the LoginPage, calling it a constant "loginPage", and do the same for the Secure Area.

Now that we declared new LoginPage, we can use the methods we have set up in our page objects, such as loginPage.navigate, and loginPage.loginAs, where we feed in the validUser and validPassword.

How to Assert Our Test is Working

We have done the arranging. We have done the acting. Now, it is time for the assertions.

Playwright.dev / Assertions mention, "Playwright includes test assertions in the form of expect function. To make an assertion, call expect(value) and choose a matcher that reflects the expectation. There are many generic matchers like toEqual, toContain, toBeTruthy that can be used to assert any conditions.

"Playwright also includes web-specific async matchers that will wait until the expected condition is met.

"By default, the timeout for assertions is set to 5 seconds. Learn more about various timeouts".

You can assert that an element is attached, a checkbox is checked, an element is disabled, editable, am element is empty, enabled, focused, visible, contains text or has an exact piece of text, contains a CSS class, has an accessible description or name.

You can also check if it has a specific ARIA role or matches an Aria snapshot, has a certain amount of child elements, has a certain id, css, an option selected, a value.

With pages, you can expect it to have a certain screenshot (for visual testing), has a title, url, or an OK status.

All of these elements will be retried if they fail the first time.

You can also have some test conditions where you do not auto retry, such as expecting a value to be something, close to something, the value is falsy (false, 0, or null). You can expect the value to be greaterThan, greater than or equal, less than a certain value. You can expect it to be NaN (not a number), null, or truthy (not false, not 0, and not null).

await expect(page).toHaveURL(/\/secure/);
    expect(await securePage.getHeading()).toBe("Secure Area");
    expect(await securePage.getAlertMessage()).toContain(messages.loginSuccessMessage);
  });

Now, we are checking that:

the heading we get from the SecurePage page object has the exact value "Secure Area".
the alert message matches the messages we have in the messages file...

And that's how you set up Page Objects and Tests using Playwright!

In the future, we will go over how to set up CI / CD pipelines with GitLab, but I need a break!

Bun Create Playwright:

Part One: Introducing bun, a new package manager and JavaScript runtime environment
Part Two: What happens when you scaffold a Playwright framework and run installed tests using bun?
Part Three: Add Type Checking and TSConfig to Bun-Create-Playwright
Part Four: Checking code with lint, formatting it with prettier
Part Five: Running Tests with Playwright Test Explorer and Generating Tests with Codegen
Part Six: How Playwright Frameworks get configured with playwright.config.ts
Part Seven: Implementing Page Objects in Playwright
Part Eight: How to Configure Playwright Test to run smoke tests, headed tests, and debug versions through scripts in package.json
Part Nine: Setting up a CI/ CD pipeline with GitLab: Quality, Test and Report
Part Ten: How Developers Can Test Their Feature Branch Against Various Playwright Configurations Before Creating a Merge Request in GitLab CI/CD
Part Eleven: Examining the artifacts job of a Playwright GitLab CI / CD pipeline
Part Twelve: Publishing Playwright HTML reports on GitLab Pages
GitLab: https://gitlab.com/tjmaher/bun-create-playwright

Whew! That was a lot!

Happy Testing!

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles

How Playwright Frameworks get configured with playwright.config.ts

2026-08-14T22:30:20.303-04:00

When we installed bun, a new package manager owned by Anthropic, then ran "bun create playwright", a new automation framework was stood up, along with sample tests, and a Playwright configuration file. In this post, we will be examining the file generated: playwright.config.ts.

Personally, I find the pre-generated file very hard to scan... there are so many options and documentation in the comments, it is difficult for me to focus on the code. Let's examine just the code generated below. If you need to see the whole file, you can see it here: https://playwright.dev/docs/test-configuration

Playwright.dev / Configuration mentions, "Playwright has many options to configure how your tests are run. You can specify these options in the configuration file".

What is Configured By Default?


import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
 
    // baseURL: 'http://localhost:3000',

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',
  },

  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },

    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
});

I know what you are thinking ... What the heck is process.env.CI ? 2 : 0?

This is know as a ternary operator. It is a shorthand for: "If A then B, else C".
You can run tests two ways: Locally, on your local machine, or through a CI / CD Pipeline like Jenkins, GitHub Actions, or GitLab.
If you are running tests on CI / CD, the process.env.CI would automatically get set. Since A is true, the value of retries would be "2".
If you are running tests locally, the process.env.CI would NOT get set. Since A is false, the value "0" would be selected.
CI / CD pipelines would get two retries. Locally, it would get no retries and a failed test would remain failed.

Now that that is cleared up, let's examine the properties:

testDir: Points to the home of the tests.
fullyParallel: Allows you to set the tests to run all at once across many workers, or by one worker, tests lined up single file. By default, all tests are run all at once with multiple workers.
forbidOnly:

Developers debugging a test, will mark that test they are working on "test.only()". It's okay to have "test.only()" locally, but you want it to complain, loudly, if you have any test still marked "test.only()" in a CI/CD pipeline.
If you are running the test locally, the test run wouldn't pick up a process.env.CI. The CI/ CD variable would not be set, which means that the variable would be "undefined" which would resolves to false. forbidOnly would be false. No alert would be thrown if an "only" was seen, which is exactly what you wanted.
If you were running this in a CI/CD pipeline, you do not want test.only() to appear. Since process.env.CI would fill in a string, or set it to true, this equation would evaluate to "forbidOnly=true". An alert would be thrown if a test running in the CI/ CD pipeline saw an "only".

retries: Tests can be fragile when running on a CI/ CD platform. If it is CI/ CD, the process.env.CI would be set, by default retrying a failed test twice. If it is not set, because the test is running locally, we have the second default, which is "0", meaning failing tests would not be rerun.
workers: How many workers would you like to execute tests for you?

By default, if you are on a CI / CD pipeline running a test it will run two workers to execute a test. Playwright recommends setting the workers to "1".
Running a test locally? "Undefined" means that Playwright will detect your machines hardware and boot up a number of workers equal to half your logical CPU cores without freezing your operating system.
Note: GitHub Actions free tier give you virtual machines with limited resources. If you have just one worker tests will run one after another making logs and failures easier to trace.
Read Playwright.dev docs about running jobs in parallel, and dividing tests into shards.

reporter: How would you like your output? Basic "html", with a standalone webpage? A "list" printing a detailed line per test showing pass or fail? A "line" displaying execution progress on a single terminal line? A "dot" report where passed tests are dots and failures are "F"? A "json" report? An xml "junit" style? A "blob" of a binary file that can be later merged from multiple machines? Or "github" which creates annotations in GitHub Actions? See Playuwright.dev / Reporter, and a list of reporters on The Testing Academy.

By default, it has set up to run the Playwright version of Chrome, Firefox, and WebKit Safari.

But What About Dot Env?

If you looked in the pre-generated configuration file, there is code that looks like:

* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// import dotenv from 'dotenv';
// import path from 'path';
// dotenv.config({ path: path.resolve(__dirname, '.env') });
Dotenv reads custom variables from a plain text file, injecting them into a Node.js application.

Sometimes, settings change depending where your code is running, such as on your local machine vs a production environment.

It is a good practice to set up one .env file per environment. .env for your local. .env.production. .env.staging, etc.

There are things such as database passwords, third party API keys, server port numbers.

With Dotenv you can create an .env file in the root folder of your project, and write configurations like:

PORT=3000
DATABASE_URL=mongodb://localhost:27817/myapp
STRIPE_API_KEY=

Make sure to add the .env file into .gitignore else you might accidently push these secrets into GitLab! ... Or you can encrypt it using https://github.com/dotenvx/dotenvx

What about the Mobile Viewports and Branded Browsers?

You also may have seen in the boilerplate playwright.config.ts file:

/* Test against mobile viewports. */
// {
// name: 'Mobile Chrome',
// use: { ...devices['Pixel 5'] },
// },
// {
// name: 'Mobile Safari',
// use: { ...devices['iPhone 12'] },
// },

/* Test against branded browsers. */
// {
// name: 'Microsoft Edge',
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
// },
// {
// name: 'Google Chrome',
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
// },

If you want Playwright to simulate how your website looks and behaves on mobile devices, you can comment out the mobile viewport section. Mobile Chrome simulates a Google Pixel 5 using Chromium, and Mobile Safari simulates an iPhone 12 using Apple's WebKit engine. ( See the ThinkSys article, Cross Browser Testing with Playwright in 2026 )

Sometimes, emulations are not enough, and you want to actually test on Microsoft Edge or Google Chrome. With this setup, you can launch the actual browsers.

... The next post, we will dive into setting up actual test and page objects.

Bun Create Playwright:

Part One: Introducing bun, a new package manager and JavaScript runtime environment
Part Two: What happens when you scaffold a Playwright framework and run installed tests using bun?
Part Three: Add Type Checking and TSConfig to Bun-Create-Playwright
Part Four: Checking code with lint, formatting it with prettier
Part Five: Running Tests with Playwright Test Explorer and Generating Tests with Codegen
Part Six: How Playwright Frameworks get configured with playwright.config.ts
Part Seven: Implementing Page Objects in Playwright
Part Eight: How to Configure Playwright Test to run smoke tests, headed tests, and debug versions through scripts in package.json
Part Nine: Setting up a CI/ CD pipeline with GitLab: Quality, Test and Report
Part Ten: How Developers Can Test Their Feature Branch Against Various Playwright Configurations Before Creating a Merge Request in GitLab CI/CD
Part Eleven: Examining the artifacts job of a Playwright GitLab CI / CD pipeline
Part Twelve: Publishing Playwright HTML reports on GitLab Pages
GitLab: https://gitlab.com/tjmaher/bun-create-playwright

Happy Testing!

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles

Running Tests with Playwright Test Explorer and Generating Tests with Codegen

2026-08-10T23:00:47.444-04:00

Finding the best locator for a web element can be a hassle:

Right clicking on an element in Google Chrome. Inspecting the element. Going to Chrome Developer Tools. Try to decide what to do if there isn't a clear test id.

Playwright comes with a built in code generator where it can built out a rough draft of a test while you interact with a website. "Playwright will look at your page and figure out the best locator, prioritizing role, text and test id locators. If the generator finds multiple elements matching the locator, it will improve the locator to make it resilient that uniquely identify the target element", according to Playwright.dev / Test Generator.

Do you have the Integrated Development Environment (IDE) by Microsoft, VS Code? You can get it at the Visual Studio Marketplace.

Playwright Test Explorer

Playwright.dev / Getting Started VS Code: https://playwright.dev/docs/getting-started-vscode

After installation, you will see a beaker icon in your VS Code left navigation menu. Selecting that, you can see your tests, such as the default ones Playwright automatically adds when it is installed:

Here you can see that Test Explorer has discovered the test suite example.spec.ts, along with two tests it created:

has title: Verifies that if you go to playwright.dev, that it has a link titled "Get Started".
get started link: Verifies at playwright.dev that after clicking on Get Started link, the heading says "Installation".

Selecting the green arrow button will open up three browser windows: Chromium, Firefox, and a WebKit browser created by Playwright, mimicking Safari. It will run a total of six tests.

But wait! There's more! You can:

Run a single test.
Run all tests at different levels.
Run on multiple browsers.
Show a browser.

You can also debug your tests:

Set breakpoints by clicking on the gutter next to a line number
Right clicking the test and select "Debug test".
Running your test will pause at your breakpoint, allowing you to step through your code.

You can also:

Fix a test with AI.
Debug tests with Trace Viewer
View DOM inspection, reviewing the Document Object Model snapshots.

Debugging Playwright tests in VS Code

https://www.youtube.com/watch?v=tJF7UhA59Gc

Generating Tests with CodeGen

"CodeGen is Playwright's powerful test generation tool that automatically creates test code by recording your interactions with a web page. Instead of writing tests from scratch, you can simply navigate through your application while CodeGen captures your actions and converts them into reliable test code with proper locators and assertions". - Playwright.Dev / Getting Started VS Code

How to Generate Tests in Playwright with the VS Code Extension

https://www.youtube.com/watch?v=5XIZPqKkdBA

Testing The-Internet: Login Page

Per the instructions, I will start sketching out tests for a Login page application: https://the-internet.herokuapp.com/login

https://the-internet.herokuapp.com/login

Test #1: Is Everything Visible?

Playwright / Tools, click on "(+) Record new", opens up a blank peach colored window.
The red RECORD icon shows that it is recording.
In the browser window, entered the URL: https://the-internet.herokuapp.com/login

Generate code to detect a Heading:

In the menu, I selected the "eye" to assert visibility, and the heading, "Login Page".

Generate code to detect an error message.

Assert visibility of username + password textbox: "eye" + click on username textbox. "eye" + click on password textbox. "eye" + click on Login button.

The code it generated. after some cleanup such as naming it "Checking visibility:

test('Checking visibility', async ({ page }) => {
  await page.goto('https://the-internet.herokuapp.com/login');
  await page.getByRole('heading', { name: 'Login Page' }).click();
  await expect(page.getByRole('heading', { name: 'Login Page' })).toBeVisible();
  await expect(page.getByRole('textbox', { name: 'Username' })).toBeVisible();
  await expect(page.getByRole('textbox', { name: 'Password' })).toBeVisible();
  await expect(page.getByRole('button', { name: ' Login' })).toBeVisible();
});

... Not bad! I'd rather use some ids than "getByRole", but not bad!

Test #2: Negative Test: Invalid User.

Playwright / Tools, click on "(+) Record new", opens up a blank peach colored window.
The red RECORD icon shows that it is recording.
In the browser window, entered the URL: https://the-internet.herokuapp.com/login

Generate code to enter incorrect username and password:

"Eye" + Login Page to check the heading is there.
Enter "NotAUser" into the username textbox.
Enter "NotAPassword" into the password textbox.

Check the alert message:

Let's see what happens if we click "Assert Visibility" and the alert message "Your username is invalid". Or "Assert text" and the error message.

test('Invalid login', async ({ page }) => {
  await page.goto('https://the-internet.herokuapp.com/login');
  await page.getByRole('heading', { name: 'Login Page' }).click();
  await expect(page.getByRole('heading', { name: 'Login Page' })).toBeVisible();
  await page.getByRole('textbox', { name: 'Username' }).fill('NotAUser');
  await page.getByRole('textbox', { name: 'Password' }).fill('NotAPassword');
  await page.getByRole('button', { name: ' Login' }).click();
  await expect(page.getByText('Your username is invalid! ×')).toBeVisible();
  await expect(page.locator('#flash')).toContainText('Your username is invalid! ×');
});

... Again, it could use some reformatting, but not bad.

Okay, one more test: Let's log in correctly.

Test #3: Smoke Test: Valid Login

Playwright / Tools, click on "(+) Record new", opens up a blank peach colored window.
The red RECORD icon shows that it is recording.
In the browser window, entered the URL: https://the-internet.herokuapp.com/login

Generate code to do a successful login:

"Eye" + Login Page to check the heading is there.
Enter "tomsmith" into username, "SuperSecretPassword!" in password, and click on "Login".

Validate that you are in the secure area:

"Eye" + "Assert Visibility" on title "Login Page".
Let's see what happens if you assert text, "Login Page", and then assert "Welcome to the Secure Area".
"Eye" + "Assert Visibility" Logout button.

test('Successful Login', async ({ page }) => {
  await page.goto('https://the-internet.herokuapp.com/login');
  await page.getByRole('textbox', { name: 'Username' }).fill('tomsmith');
  await page.getByRole('textbox', { name: 'Password' }).fill('SuperSecretPassword!');
  await expect(page.getByRole('heading', 
     { name: 'Secure Area', exact: true })).toBeVisible();

  await expect(page.locator('h2')).toContainText('Secure Area');
  await expect(page.locator('h4')).toContainText('Welcome to the Secure Area. 
       When you are done click logout below.');
  await expect(page.getByRole('link', { name: 'Logout' })).toBeVisible();
});

We now have enough to create some tests!

Bun Create Playwright:

Part One: Introducing bun, a new package manager and JavaScript runtime environment
Part Two: What happens when you scaffold a Playwright framework and run installed tests using bun?
Part Three: Add Type Checking and TSConfig to Bun-Create-Playwright
Part Four: Checking code with lint, formatting it with prettier
Part Five: Running Tests with Playwright Test Explorer and Generating Tests with Codegen
Part Six: How Playwright Frameworks get configured with playwright.config.ts
Part Seven: Implementing Page Objects in Playwright
Part Eight: How to Configure Playwright Test to run smoke tests, headed tests, and debug versions through scripts in package.json
Part Nine: Setting up a CI/ CD pipeline with GitLab: Quality, Test and Report
Part Ten: How Developers Can Test Their Feature Branch Against Various Playwright Configurations Before Creating a Merge Request in GitLab CI/CD
Part Eleven: Examining the artifacts job of a Playwright GitLab CI / CD pipeline
Part Twelve: Publishing Playwright HTML reports on GitLab Pages
GitLab: https://gitlab.com/tjmaher/bun-create-playwright

Happy Testing!

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles

Checking code with lint, formatting it with prettier

2026-08-10T19:23:45.625-04:00

Now that we've installed bun, Anthropic's package manager, scaffolded a Playwright framework and closely examined the results, and added typechecking with TypeScript's compiler, it's time to add ways to check the code with lint, and reformat the code with prettier.

We will be using:

ESLint, as the static-analysis tool to review the code without running it. Little bits of fluff -- like syntax errors, structural bugs, anti-patterns, and code style violations -- can collect on your code, so it helps to run a linter to help catch it all, such as ESLint. There is also a linter, eslint-plugin-playwright, for Playwright tests.
Prettier enforces a consistent code style across your entire codebase. Because ESLint and Prettier can conflict, we will be using Prettier's eslint-config-prettier, which turns off all rules that are unnecessary or might conflict with ESLint.

What is a Linter?

According to the Wikiwand entry for Lint, "Stephen C. Johnson, a computer scientist at Bell Labs, came up with the term 'lint' in 1978 while debugging the yacc grammar he was writing for C and dealing with portability issues stemming from porting Unix to a 32-bit machine. The term was borrowed from lint, the tiny bits of fiber and fluff shed by clothing, as the command he wrote would act like a lint trap in a clothes dryer, capturing waste fibers while leaving whole fabrics intact. The lint program was released outside of Bell Labs in Unix V7, in 1979.

"In his 1978 paper, Johnson explained his reasons for creating a new program to detect errors: '...the general notion of having two programs is a good one' because they concentrate on different things, thereby allowing the programmer to 'concentrate at one stage of the programming process solely on the algorithms, data structures, and correctness of the program, and then later retrofit, with the aid of lint, the desirable properties of universality and portability' "

What is ESLint?

Website: https://eslint.org/
GitHub: https://github.com/eslint/eslint

According to ESLint.org / About, "ESLint is an open source JavaScript linting utility originally created by Nicholas C. Zakas in June 2013. Code linting is a type of static analysis that is frequently used to find problematic patterns or code that doesn’t adhere to certain style guidelines. There are code linters for most programming languages, and compilers sometimes incorporate linting into the compilation process.

"JavaScript, being a dynamic and loosely-typed language, is especially prone to developer error. Without the benefit of a compilation process, JavaScript code is typically executed in order to find syntax or other errors. Linting tools like ESLint allow developers to discover problems with their JavaScript code without executing it.

"The primary reason ESLint was created was to allow developers to create their own linting rules. ESLint is designed to have all rules completely pluggable. The default rules are written just like any plugin rules would be. They can all follow the same pattern, both for the rules themselves as well as tests. While ESLint will ship with some built-in rules to make it useful from the start, you’ll be able to dynamically load rules at any point in time".

What is ES Lint for Playwright?

ESLint for Playwright was initially written by open-source developer Mark Skelton, a senior staff software engineer at Cursor. It is now maintained by the Playwright Community Organization.

From BrowserStack.com's Setting Up ESLint fpr Playwright Projects:

Have you ever returned to a Playwright project after a few weeks and felt the tests were suddenly unstable or difficult to trust?

In most cases the problem isn’t Playwright. It comes from small issues that slip in unnoticed.

Missing awaits. Inconsistent patterns. Promise errors that never surface. Test files that grow without any structure.

Playwright ESLint is a linting setup that helps ESLint understand Playwright’s testing patterns and catch issues that commonly appear in UI automation.

What is Prettier?

Website: https://prettier.io/
Prettier Playground: https://prettier.io/playground/
GitHub: https://github.com/prettier/prettier

According to James Long's January 2017 blog entry, A Prettier Script Formatter, "Prettier gets rid of all original styling and guarantees consistency by parsing JavaScript into an AST and pretty-printing the AST. Unlike eslint, there aren't a million configuration options and rules. But more importantly: everything is fixable [...]"

In JavaScript, an Abstract Syntax Tree (AST) is a nested object structure that maps out the semantic meaning of your code -- such as identifying variable declarations, function calls, and loops -- while ignoring visual styling. Because Prettier is strictly a code formatter, it parses your source code into an AST and then regenerates entirely new text based on its own style rules. Since Prettier only modifies surface-level elements like indentation, line breaks, quotes, and semicolons, the underlying logic remains untouched, resulting in an identical AST before and after formatting

Installing ESLint

According to ESLint.org, you can install it with NPM, Yarn, PNPM (package managers we saw that Playwright all have listed in their installation documentation. They also mention one we have seen already... bun. To install ESLint with bun, they suggest running the command:

bun create @eslint/config@latest

It then asked me a series of questions:

What do you want to lint? ... I selected Markdown.
How would you like to use ESLint? ... To check syntax and find problems.
What type of modules does your project use? ... I selected "JavaScript modules" since we seem to use import/ export, and not require/ exports anywhere.
Which framework does your project use? ... None of these.
Does your project use TypeScript? ... Yes.
Where does your code run? Browser? Node? ... it actually runs in both, so let's check off both.
Which language do you want your configuration file to be written in? ... JavaScript.

Why did I pick JavaScript? If I picked TypeScript, I would then have to install a library called Jiti to load the TypeScript Config file. Keeping it as a JavaScript file would make it easier.

Then it asked:

The config that you've selected requires the following dependencies: eslint, @eslint/js, globals, typescript-eslint.
Would you like to install them now? ... Yes.

It continued:

Which package manager do you want to use? ... npm, yarn, pnpm, bun ... I selected "bun".

Finally, it installed everything. When it was finished, it set up a new file...

eslint.config.mjs

import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import { defineConfig } from "eslint/config";

export default defineConfig([
  { files: ["**/*.{js,mjs,cjs,ts,mts,cts}"], plugins: { js }, extends: ["js/recommended"], languageOptions: { globals: {...globals.browser, ...globals.node} } },
  tseslint.configs.recommended,
]);

js/recommended gives us ESLint’s standard default rules for JavaScript catching mistakes like using variables before they’re defined, using undeclared variables, unreachable code, confusing or invalid syntax patterns, some common logic and scope problems.

tseslint.configs.recommended adds the recommended rules for TypeScript. It catches stuff like: unsafe or incorrect type usage, confusing any usage, unnecessary type assertions, some patterns that are likely to cause bugs in TypeScript code.

Installing ESLint for Playwright

According to the NPMJS.com entry on eslint-plugin-playwright,

bun add -D eslint-plugin-playwright

This adds eslint-plugin-playwright to your package.json.

The docs mention that eslint-plugin-playwright, "The recommended setup is to use the files field to target only Playwright test files. In the examples below, this is done by targeting files in the tests directory and only applying the Playwright rules to those files. In your project, you may need to change the files field to match your Playwright test file patterns".

Following their directions, our eslint.config.jts now looks like:

import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import { defineConfig } from "eslint/config";
import playwright from "eslint-plugin-playwright";

export default defineConfig([
  {
    files: ["**/*.{js,mjs,cjs,ts,mts,cts}"],
    plugins: { js },
    extends: ["js/recommended"],
    languageOptions: {
      globals: { ...globals.browser, ...globals.node },
    },
  },
  {
    files: ["tests/**"],
    extends: [playwright.configs["flat/recommended"]],
  },
  tseslint.configs.recommended,
]);

... If we wanted to pick and choose which rules to follow, we could add a rules block, but let's leave it as is for now.

To run the linter:

bunx eslint . --ext .ts,.mts,.js,.mjs

... No output? No problems detected!

ESLint for Prettier

GitHub: https://github.com/prettier/eslint-config-prettier

We are using ESLint for our code linter, ESLint for Playwright as our Playwright linter.

Both of these packages would step on the toes of our code formatter, Prettier, so Prettier came up with eslint-config-prettier, which had some Prettier rules that would conflict turned off.

We are going to add Prettier and eslint-config-prettier at the same time with:

bun add -D prettier eslint-config-prettier

To check if Prettier installed:

bunx prettier --version

Check with Prettier if there are any errors:

bunx prettier --check .

... And it looks like there are four warnings.

What are they?

bunx prettier --list-different .
bunx prettier --check . --log-level debug

Okay, they are minor spacing issues. Let's fix them:

bunx prettier --write .

Want to see more options?

Check out Prettier's Command Line Interface (CLI) commands at https://prettier.io/docs/cli

Add Scripts to the Package.json

You know, "bunx eslint ." and all the rest is kinda complicated.

Let's add some more scripts that are lint related to our package.json, which already has our test script and typecheck script where we added the TypeScript compiler.

"scripts": {
    "test": "playwright test",
    "lint": "eslint .",
    "lint:ci": "eslint . --max-warnings 0",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "format:debug": "prettier --check . --log-level debug",
    "format:diff": "prettier --list-different",
    "typecheck": "tsc --noEmit"
  },

... All we need to do is run "bun run test", "bun run format", or "bun run typecheck" to run tests, format the code, or run typecheck.

Also, I added lint:ci, for our CI/CD pipeline we will be adding later, so it does not allow any warnings with lint.

Bun Create Playwright:

Part One: Introducing bun, a new package manager and JavaScript runtime environment
Part Two: What happens when you scaffold a Playwright framework and run installed tests using bun?
Part Three: Add Type Checking and TSConfig to Bun-Create-Playwright
Part Four: Checking code with lint, formatting it with prettier
Part Five: Running Tests with Playwright Test Explorer and Generating Tests with Codegen
Part Six: How Playwright Frameworks get configured with playwright.config.ts
Part Seven: Implementing Page Objects in Playwright
Part Eight: How to Configure Playwright Test to run smoke tests, headed tests, and debug versions through scripts in package.json
Part Nine: Setting up a CI/ CD pipeline with GitLab: Quality, Test and Report
Part Ten: How Developers Can Test Their Feature Branch Against Various Playwright Configurations Before Creating a Merge Request in GitLab CI/CD
Part Eleven: Examining the artifacts job of a Playwright GitLab CI / CD pipeline
Part Twelve: Publishing Playwright HTML reports on GitLab Pages
GitLab: https://gitlab.com/tjmaher/bun-create-playwright

Happy Testing!

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles

Add Type Checking and TSConfig to Bun-Create-Playwright

2026-08-07T23:10:43.830-04:00

Now that we have installed bun, Anthropic's package manager, and scaffolded a Playwright framework and closely examined the results, we are going to explore with our Bun-Create-Playwright project ways to check if our code is correct.

The first method we will be exploring is typechecking.

Why Typechecking? As the Playwright.dev / Node.js Introduction mentions:

"[...] Playwright does not check the types and will run tests even if there are non-critical TypeScript compilation errors. We recommend you run TypeScript compiler alongside Playwright.

"[...] Note that Playwright only supports the following tsconfig options: allowJs, baseUrl, paths, references and extends.

"[...] By default, Playwright will look up a closest tsconfig for each imported file by going up the directory structure and looking for tsconfig.json or jsconfig.json. This way, you can create a tests/tsconfig.json file that will be used only for your tests and Playwright will pick it up automatically".

Before we go further down this road...

What is Type Checking?

According to Type Checking in TypeScript: A Beginners Guide, every piece of data in TypeScript is given a "type", and this "type" determines what properties the data has, and what methods are available to it. The types can be things like a Number, String, Enum, Boolean, Array, Object, Type assertions, or others.

Since all data in TypeScript is given a type, it means that the TypeScript compiler, tsc, can check every property to make sure it is being used correctly. It makes sure that the expected properties exist and that the methods and functions are all compatible.

And best of all, you can run these checks in your IDE as you are writing the code!

To run typechecking against our code, all we have to do is execute from the Terminal:

tsc --noEmit

Since we are just kicking the tires of our code to see what happens, we don't need to emit "compiler output files like JavaScript source code, source-maps or declarations. This makes room for another tool like Babel, or swc to handle converting the TypeScript file to a file which can run inside a JavaScript environment. You can then use TypeScript as a tool for providing editor integration, and as a source code type-checker". ( TypeScriptLang.org / noEmit )

The only problem? We need a TypeScript configuration file added to our project before we do that, and as you could see when we examined what "bun create playwright" produced, we don't have one.

If you try to run the "tsc --noEmit" command without a tsconfig.json, you get the message:

Version 6.0.3
tsc: The TypeScript Compiler - Version 6.0.3

TS COMMON COMMANDS

tsc: Compiles the current project (tsconfig.json in the working directory.)

tsc app.ts util.ts: Ignoring tsconfig.json, compiles the specified files with default compiler options.

tsc -b: Build a composite project in the working directory.

tsc --init: Creates a tsconfig.json with the recommended settings in the working directory.

tsc -p ./path/to/tsconfig.json: Compiles the TypeScript project located at the specified path.

tsc --help --all: An expanded version of this information, showing all possible compiler options

tsc --noEmit
tsc --target esnext
Compiles the current project, with additional settings.

COMMAND LINE FLAGS

--help, -h Print this message.
...

--outFile Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output.

--outDir Specify an output folder for all emitted files.

You can learn about all of the compiler options at https://aka.ms/tsc

So, how do we create with bun a tsconfig.json file?

bun init

What does Bun Init Do?

According to the Bun.com / Init Templating docs, It creates:

a package.json file with a name that defaults to the current directory name
a tsconfig.json or jsconfig.json file, depending on whether the entry point is a TypeScript file
an entry point, which defaults to index.ts unless any of index.{tsx, jsx, js, mts, mjs} exist or the package.json specifies a module or main field
a README.md file

It also creates AI Agent rules (disable with $BUN_AGENT_RULE_DISABLED=1):

a CLAUDE.md file when Claude CLI is detected (disable with CLAUDE_CODE_AGENT_RULE_DISABLED env var)
a .cursor/rules/*.mdc file when Cursor is detected, which tells Cursor AI to use Bun instead of Node.js and npm

But we already scaffolded a Playwright project! Do we have to start from scratch and do everything all over again?

No, but we do need to make some modifications:

Does your package.json in your root folder of the project have "main" to be "index.js"? Change that JavaScript extension to ".ts".
Do you have a "jsconfig.json" file? Delete it.
Do you have an index.html file? Delete it.
Then run: bun init

TSConfig.json Achieved! First version!

The resulting tsconfig.json file produced by "bun init", according to Google AI, "configures TypeScript to act strictly as a type-checker while offloading the actual bundling, compiling, and running of your JavaScript/TypeScript code to Bun".

{
  "compilerOptions": {
    // Environment setup & latest features
    "lib": ["ESNext"],
    "target": "ESNext",
    "module": "Preserve",
    "moduleDetection": "force",
    "jsx": "react-jsx",
    "allowJs": true,
    "types": ["bun"],

    // Bundler mode
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "noEmit": true,

    // Best practices
    "strict": true,
    "skipLibCheck": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,

    // Some stricter flags (disabled by default)
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noPropertyAccessFromIndexSignature": false
  }
}

Environment setup & latest features

These settings ensure TypeScript understands the latest syntax and runtime environment variables.

"lib": ["ESNext"] -- includes type definitions for the newest JavaScript standard library features (Promise, Array methods, etc.).
"target": "ESNext" -- compiles/type-checks against the latest ECMAScript syntax rather than downleveling to an older version.
"module": "Preserve" -- keeps your import/export statements as written (doesn't rewrite ESM to CommonJS or vice versa); left for Bun to handle at runtime.
"moduleDetection": "force" -- treats every file as a module (adds import/export scoping) even if it has no import/export statements itself.
"jsx": "react-jsx" -- compiles JSX using the React 17+ automatic runtime (no need to import React in every file that uses JSX).
"allowJs": true -- lets .js files be included and type-checked alongside .ts files.
"types": ["bun"] -- only loads Bun's global type definitions (e.g. Bun.serve), instead of auto-including every @types/* package found in node_modules.

Bundler mode

These rules match how modern build tools resolve file paths and handle module definitions.

"moduleResolution": "bundler" -- resolves imports the way modern bundlers do, closer to Node's ESM resolution but more permissive (works with paths, package exports, etc.).
"allowImportingTsExtensions": true -- permits writing import './foo.ts' with the explicit extension (normally disallowed).
"verbatimModuleSyntax": true -- requires type-only imports to be explicitly marked (import type { Foo }), so the compiler doesn't have to guess what to strip at build time.
"noEmit": true -- TypeScript only type-checks; it doesn't output compiled .js files (Bun runs the .ts files directly).

Best practices

These options activate strict type-safety rules to catch potential bugs early.

"strict": true -- turns on TypeScript's full strict type-checking mode (strictNullChecks, noImplicitAny, etc. all at once).
"skipLibCheck": true -- skips type-checking inside .d.ts declaration files (faster builds, avoids errors in third-party type definitions you don't control).
"noFallthroughCasesInSwitch": true -- errors if a switch case falls through to the next case without a break/return.
"noUncheckedIndexedAccess": true -- accessing an object/array by index (e.g. arr[i]) returns T | undefined instead of just T, forcing you to handle the "might not exist" case. Useful in test code that reads array/object results.
"noImplicitOverride": true -- requires the override keyword when a subclass method overrides a parent class method (relevant if you're using Page Object classes with inheritance).

Stricter flags (disabled here)

These are options explicitly turned off to keep the development experience smoother and less strict during early coding phases.

"noUnusedLocals": false -- won't error on declared-but-unused local variables.
"noUnusedParameters": false -- won't error on unused function parameters (common in test fixtures/callbacks where you don't use every argument).
"noPropertyAccessFromIndexSignature": false -- allows dot notation (obj.foo) even on objects typed with an index signature, instead of forcing bracket notation (obj['foo']).

... This is what "bun init" produced. Let's investigate with Claude.ai or Google AI to see if we should now be all set with our Bun + Playwright + TypeScript project...

TSConfig.json: Take Two!

After I ran it by GitHub Copilot, it suggested to change the tsconfig like so...

  "compilerOptions": {
    // Environment setup & latest features
    "lib": ["ES2022", "DOM"],
    "target": "ES2022",
    "module": "ESNext",
    "moduleDetection": "force",
    "types": ["node", "bun"],

But Why, Claude?

"These choices are better because they match the runtime and tooling you actually have, rather than using the most generic defaults.target: "ES2022": this targets a modern JavaScript version that is broadly supported and a good default for current Node/Bun environments. It is more practical than ESNext because it gives a stable, explicit baseline.

lib: ["ES2022", "DOM"]: this tells TypeScript about modern JavaScript features plus browser APIs like window, document, and fetch. That matters for Playwright tests, which often interact with browser-like environments.
module: "ESNext": this matches modern ESM-style projects and works well with current Bun/Node tooling. It is a better fit than older module systems when you are using modern package resolution.
types: ["node", "bun"]: this makes the compiler aware of both Node and Bun globals/types. That is useful because your project is using Bun as the package runner while also relying on Node-compatible APIs.

"In short, the new config is more explicit, more compatible with current tooling, and less likely to surprise you later when you add scripts, browser APIs, or ESM-style imports".

Add the TypeScript Checking to a Script

Okay, let's add the "tsc --noEmit" command to our package.json script:

  "scripts": {
    "test": "playwright test",
    "typecheck": "tsc --noEmit"
  },

Now, when you run "bun run typecheck", the TypeScript Compiler will test out your code.

No errors? No output. No problem!

With our next post, we will see other ways to add ways to review our code.

Bun Create Playwright:

Part One: Introducing bun, a new package manager and JavaScript runtime environment
Part Two: What happens when you scaffold a Playwright framework and run installed tests using bun?
Part Three: Add Type Checking and TSConfig to Bun-Create-Playwright
Part Four: Checking code with lint, formatting it with prettier
Part Five: Running Tests with Playwright Test Explorer and Generating Tests with Codegen
Part Six: How Playwright Frameworks get configured with playwright.config.ts
Part Seven: Implementing Page Objects in Playwright
Part Eight: How to Configure Playwright Test to run smoke tests, headed tests, and debug versions through scripts in package.json
Part Nine: Setting up a CI/ CD pipeline with GitLab: Quality, Test and Report
Part Ten: How Developers Can Test Their Feature Branch Against Various Playwright Configurations Before Creating a Merge Request in GitLab CI/CD
Part Eleven: Examining the artifacts job of a Playwright GitLab CI / CD pipeline
Part Twelve: Publishing Playwright HTML reports on GitLab Pages
GitLab: https://gitlab.com/tjmaher/bun-create-playwright

Until then... Happy Testing!

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles

What happens when you scaffold a Playwright framework and run installed tests using bun?

2026-08-06T13:37:06.209-04:00

We covered in the last blog post how to install bun, a new package manager.

In this blog post, we will look into using bun to install a new Playwright framework.

Create the Playwright Framework

Once I installed bun on my Windows PC and was up and running I created a new folder, "bun-create-playwright".

I opened up that folder in VS Code, along with a new PowerShell terminal. In that terminal I entered:

bun create playwright

This activated the interactive Playwright installer that Playwright comes with.

I selected I wanted it to create for me a TypeScript project, placing the tests in the default folder, tests, but I decided not to add a GitHub Actions workflow. I wanted to experiment with using GitLab.
I chose it to set up and install all the browsers for me... which it did... using NPX, part of Node.

Wait a second, when it comes to our Playwright framework, doesn't bun replace node?

No. Bun might be a JavaScript runtime, a package manager, and a bundler shipped as a single software tool, but in our case we are simply using it as a package manager in our Playwright framework.

Bun works alongside Node.js in the Playwright project. We still use Playwright's test runner, a Node.js program. Bun handles installations and run tasks.

Alert: Windows Bug!

Initially, that wasn't enough to install Playwright's internal browsers. There is a bug with bun + Playwright Windows where we also need to:

bun add --dev @playwright/test
bunx playwright install

That was enough for the browsers to install.

Create the Bun Lock File

After the browsers are installed, we need to install bun in our project, to create from the package.json a bun installation.

Run in the Terminal: bun install
Review the newly created file bun.lock.file in the root directory of the project.
Delete the package-lock.json file.

Add the test script to the Package.json

If you look in the package.json file, you can see that the scripts code block is currently empty.

"scripts": {}

Inside this code block, we will be adding:

"scripts": {    
    "test": "playwright test"  
  },

Examine the Included Tests

Two tests will automatically be set up for you:

has title: Navigates to playwright.dev and expects the title of the page to have the word "Playwright".
get started: Navigates to playwright.dev and checks the "Get started" link.

tests/ example.spec.ts

import { test, expect } from '@playwright/test';

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Click the get started link.
  await page.getByRole('link', { name: 'Get started' }).click();

  // Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

There are three stages you want to follow when you are designing an automated test:

Arrange: Setup things like opening up a browser page.
Act: Go to a web site and see if you can get a link and click on it.
Assert: Expect that the conditions of the tests are met, failing the test if the expected results and actual results do not match up.

import pulls code that lives in another file or package so you can use it in your project. We import two specific named functions, test and expect, from the @playwright/test package (the Playwright Test framework's core library).

test is a function used to define an individual test case.
expect is a function used to create assertions (checks that something is true, and fail the test if it isn't). [ See Playwright.dev / Assertions ]

The { test, expect } syntax is called a "named import", getting specific things out of the package rather than the whole package as one object.

test blocks set up two Playwright tests. Strings such as "has title" sets up the name of the test.

async sets up this test function to be asynchronous, with many tests allowed to be executed at the same time as this one. The browser to run the first "has title" test might not be able to navigate to the page right away. The aync keyword allows the test to pause and wait for any slower actions to be completed before moving to the next part of the test. Once we set up async, we can use await later in the test. Meanwhile, it returns a JavaScript Promise, a placeholder container until we determine the success or failure of the action, when it actually will contain a value. This promise will be either pending, fulfilled, or rejected.

page sets up the pre-defined Playwright page fixture [ See Playwright.dev / Fixtures ]. With this call, before the individual test starts, a fresh isolated page is launched just for this test, so the "has title" test does not interfere with the "get started" test. This page fixture has automatic setup and teardown.

=> is a "hash rocket", representing the "arrow function", separating the earlier parameters of the test with the coming body of the test function.

await returns a Promise, a placeholder, so if we can't do something like go to a page right away, the test won't automatically go to the next line of code and possibly fail. Playwright by default waits 30 seconds for a goto to complete, 30 seconds for an action to happen, but only 5 seconds on an assertion like "expect". If it goes over that timeout, the test will fail.

goto is part of the Page fixture, that automatically handles page navigation.

expect is an assertion. By default, the test expects this condition to be met within five minutes, else the test fails.

toHaveTitle is a built in Playwright page assertion. It allows regular expressions such as /Playwright/ to let the test know that having the word "Playwright" in the title is acceptable. Playwright has many assertions, such as the PageAssertions toHaveTitle, toHaveURL, toHaveScrreenshot(name).

getByRole is a Playwright Locator, that helps you find a web element on the page. Are you looking for a certain alert, alertDialog, banner, button, checkbox, heading, img, link, listbox, menu, menubar, list, listbox, progressbar, searchbox, table, or textbox, tooltip, amongst others? You can try to getByRole. With this you are locating elements by their ARIA role, ARIA attributes and accessible name.

... Note that with locators, you can also getByTestId, getByAltText, getByText, getByTitle, etc.

.click is a Playwright action you can perform.

Once you found an element by a locator, you can .click or .dblclick it, .click({ button: 'right' }) or .click({ modifiers: ['Shift']}), and .hover.
You can .check a checkbox or .selectOption on a radio button, and expect it .toBeChecked.
You can drag and drop an item.
You can fill a textbox, input field, or text area.

.toByVisible is a Playwright Locator Assertion.

Once you found an element by a Playwright locator, you can in the test expect it .toBeChecked, .toBeDisabled, .toBeEditable, .toBeEmpty, .toBeEnabled, .toBeFocused, .toBeHidden, .toBeInViewport, .toBeVisible, .toContainClass, .toContainText, /toHavaAccessibleDescription, .toHaveAttribute, .toHaveId, .toHaveRole, .toHaveText, .toHaveValue.
Each of these methods can be negated chaining a "not" value. Expect a text box .not.toBeEmpty.

Execute the Playwright Tests: Bun Run Test

Now, we should be able to run the tests that come with the initial Playwright scaffolding:

bun run test

The Playwright tests, are automatically run in Chromium, Firefox, and WebKit / Safari, and should pass.

You can see the results if you open up the bun-create-playwright folder in an IDE such as VS Code:

Go to the playwright-report folder
Right click on the index.html file that was produced.
Select "Open with Live Server"

You can drill down into the test to see more information about the tests.

What Does Playwright Install?

The Playwright scaffolder installs:

node_modules folder:

Created by a package manager (npm, yarn, bun, pnpm) when you install dependencies. Contains the actual source code of every package your project depends on, plus the dependencies of those dependencies (transitive dependencies), recursively. It's populated by running an install command (npm install, bun install, etc.), and never edited by hand.

Node's module resolution algorithm looks inside node_modules when you import/require a package by name.

Contains .bin, @playwright, @types. bun-types, playwright, playwright-core, typescript, undici-types. According to Claude.ai:

.bin: Executable scripts for installed packages. This is where npm/bun puts symlinks (symbolic links) to CLI (Command Line Interface) tools so you can run them via npx playwright or through package.json scripts, instead of needing global installation of every executable.

@playwright: Scoped npm namespace. Typically contains @playwright/test, the Playwright Test runner package (test runner, assertions, fixtures, config handling — what you import when you write import { test, expect } from '@playwright/test').

@types: Folder that Bun creates to hold TypeScript type declaration packages published under the @types scope on npm. These packages come from DefinitelyTyped.org, a large community-maintained repository on GitHub where volunteers write and publish TypeScript type declarations for JavaScript libraries that don't include their own. When a package doesn't ship built-in types (common for older libraries or runtime built-ins like Node.js itself), DefinitelyTyped contributors write a separate package describing that library's functions, arguments, and return values, then publish it to npm as @types/<library-name>These give you IntelliSense and type-checking for JS APIs.

bun-types: Type declarations for Bun's runtime APIs (Bun.file, Bun.serve, etc.), letting TypeScript understand Bun-specific globals if you're running/building with Bun instead of Node.

playwright: The full Playwright package, including the browser automation driver and CLI. This is distinct from @playwright/test: playwright is the core library (browser launching, contexts, pages), while @playwright/test builds the test runner on top of it.

playwright-core: The stripped-down core of Playwright without the browser-download step. playwright depends on this internally; you'd typically only see it listed as a top-level dependency if something needs Playwright's automation APIs without auto-downloading browser binaries.

typescript: The TypeScript compiler (tsc) itself, used for type-checking and/or transpiling .ts files.

undici-types: type declarations for undici, Node's HTTP client, pulled in automatically by @types/node.

playwright-report folder:

A folder to store HTML Reports produced after a test run.

According to Playwright.dev / HTML Reporter, "HTML reporter produces a self-contained folder that contains report for the test run that can be served as a web page.

"[...] By default, HTML report is opened automatically if some of the tests failed. You can control this behavior via the open property in the Playwright config or the PLAYWRIGHT_HTML_OPEN environmental variable. The possible values for that property are always, never and on-failure (default)".

test-results folder:

After running the test, it contains .last-run.json which contains "status: passed" with an empty array of failedTests.

tests folder:

example.spec.ts contains the pre-installed Playwright tests we have already covered.

.gitignore:

Want something to not be checked in, committed, and merged to an outside source? Place it here.

Playwright automatically has it so node_modules, local test-results, local playwright-reports, and things in the local .cache and .auth do not get committed.

bun.lock

This lockfile is produced by "bun install". Why have a lockfile? According to Code Protection Hub,

"The entire philosophy of lock file programming revolves around a concept called Semantic Versioning (SemVer). In a manifest file (like package.json), developers specify acceptable version ranges using caret (^) or tilde (~) symbols. For example, ^2.4.1 allows the package manager to download minor updates and bug fixes (up to version 3.0.0).

"While this allows projects to automatically receive security patches, it introduces a severe risk: Dependency Drift.

"Imagine Developer A runs npm install on Monday and receives version 2.4.1. On Friday, the package author publishes version 2.5.0 containing a subtle bug. When Developer B joins the team and runs npm install, they receive the buggy 2.5.0 version. The application breaks for Developer B, but works perfectly for Developer A. This is the classic "it works on my machine" nightmare.
The lock file acts as a historical snapshot. It records the exact version, the registry URL, and the cryptographic hash (SHA-512) of the code downloaded on Monday. When Developer B installs the project, the package manager ignores the flexible package.json ranges and strictly enforces the exact tree defined in the lock file".

package.json:

From HeyNode / What is Package.json:

"If you’ve worked with Node.js before, you have likely encountered a package.json file. It is a JSON file that lives in the root directory of your project. Your package.json holds important information about the project. It contains human-readable metadata about the project (like the project name and description) as well as functional metadata like the package version number and a list of dependencies required by the application.

"Your project’s package.json is the central place to configure and describe how to interact with and run your application. It is used by the npm CLI (and yarn) to identify your project and understand how to handle the project’s dependencies. It’s the package.json file that enables npm to start your project, run scripts, install dependencies, publish to the NPM registry, and many other useful tasks. The npm CLI is also the best way to manage your package.json because it helps generate and update your package.json file throughout a project’s life.

"Your package.json fills several roles in the lifecycle of your project, some of which only apply for packages published to NPM. If you’re not publishing your project to the NPM registry or otherwise making it publicly available to others, your package.json is still essential to the development flow.

"The name field defines the name of the package. When publishing to the NPM registry, this is the name the package will be listed under. It must be no more than 214 characters, only lowercase letters, and it must be URL-safe (hyphens and underscores allowed, but no spaces or other characters disallowed in URLs).

"The version field is very important for any published package, and required before publishing. It is the current version of the software that the package.json is describing.

"You are not required to use SemVer, but it is the standard used in the Node.js ecosystem and highly recommended. For an unpublished package, this property isn’t strictly required. Typically, the version number is bumped according to SemVer before publishing new versions to NPM.

"The license field lets us define what license applies to the code the package.json is describing. Again, this is very important when publishing a project to the NPM registry, as the license may limit the use of your software by some developers or organizations. Having a clear license in place helps clearly define what terms the software is able to be used under".


{
  "name": "bun-create-playwright",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "playwright test"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs",
  "devDependencies": {
    "@playwright/test": "^1.62.1",
    "@types/bun": "latest",
    "@types/node": "^26.1.2"
  },
  "private": true,
  "peerDependencies": {
    "typescript": "^5"
  }
}

playwright.config.ts:

This Playwright Configuration file is the central configuration file for a Playwright test project. It lives at the root of your project and tells Playwright how to run your tests: which browsers to use, where to find test files, how to handle failures, what reports to generate, etc. Instead of passing a dozen command-line flags every time you run tests, you define the settings once here.


import { defineConfig, devices } from '@playwright/test';

/**
 * Read environment variables from file.
 * https://github.com/motdotla/dotenv
 */
// import dotenv from 'dotenv';
// import path from 'path';
// dotenv.config({ path: path.resolve(__dirname, '.env') });

/**
 * See https://playwright.dev/docs/test-configuration.
 */
export default defineConfig({

Breakdown of the main components

testDir: points Playwright to the folder containing your spec files.
fullyParallel: controls whether tests within a single file run in parallel workers rather than sequentially.
forbidOnly: a safety check, usually enabled only in CI, that fails the build if test.only was left in the code.
retries: how many times a failed test is retried before being marked as failed. Commonly set higher in CI than locally.
workers: how many tests run concurrently. CI environments often limit this to avoid resource contention.
reporter: determines the output format for test results (HTML report, list in the terminal, JUnit XML for CI integration, etc). You can specify multiple reporters at once.
use: shared defaults inherited by every test, unless overridden at the project or test level. Common settings here:

baseURL for relative navigation
trace for capturing a debuggable trace of the test run
screenshot and video for failure artifacts
headless to control whether the browser UI is shown

projects: defines the different browser/device combinations to run the same test suite against. Each project can also override anything in use. This is how you get cross-browser coverage without duplicating test code.

With the next post, we are going to make some changes to the project per Playwright Ambassador Butch Mayhew's recommendation.

Bun Create Playwright:

Part One: Introducing bun, a new package manager and JavaScript runtime environment
Part Two: What happens when you scaffold a Playwright framework and run installed tests using bun?
Part Three: Add Type Checking and TSConfig to Bun-Create-Playwright
Part Four: Checking code with lint, formatting it with prettier
Part Five: Running Tests with Playwright Test Explorer and Generating Tests with Codegen
Part Six: How Playwright Frameworks get configured with playwright.config.ts
Part Seven: Implementing Page Objects in Playwright
Part Eight: How to Configure Playwright Test to run smoke tests, headed tests, and debug versions through scripts in package.json
Part Nine: Setting up a CI/ CD pipeline with GitLab: Quality, Test and Report
Part Ten: How Developers Can Test Their Feature Branch Against Various Playwright Configurations Before Creating a Merge Request in GitLab CI/CD
Part Eleven: Examining the artifacts job of a Playwright GitLab CI / CD pipeline
Part Twelve: Publishing Playwright HTML reports on GitLab Pages
GitLab: https://gitlab.com/tjmaher/bun-create-playwright

Happy Testing!

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles

Introducing bun, a new package manager and JavaScript runtime environment

2026-08-05T21:58:25.754-04:00

New job? New toolset to explore! In this post I'll be investigating a new JavaScript package manager and runtime environment called bun.sh.

You may have noticed on Playwright.Dev's Getting Started / Installation section there are three different ways to install a ui or api test automation framework with the latest version of Playwright:

npm init playwright@latest
yarn create playwright
pnpm create playwright

For this blog post I'll be investigating a fourth way, the new toolset they just started using at work, bun.sh.

bun create playwright

What is npm, yarn, pnpm, and bun? These are called package managers.

What is a package? Developing a project, you don't have to figure out how to code everything yourself. You can include in your projects outside libraries, or "packages" of code from from the public JavaScript registry npmjs.com.

The problem is that these packages then need to be downloaded, installed, managed, and updated whenever they are updated. JavaScript projects can use a package manager, such as bun, to help this process.

When putting together a Playwright automation framework based around JavaScript and TypeScript, Playwright uses the Node.js JavaScript runtime environment, to run its test runner, execute automation scripts, and manage its browser instances.(See Nodejs.org / About )

There is a division of labor: Node.js runs these internal functions like running tests. NPM, Yarn, PNPM, and now Bun handle the packages.

Why are there so many package managers? Each has its own specialization. The original NPM is bundled already with Node.js. Yarn is a Facebook toolset that was created when NPM was found to work too slow. PNPM was created to be smaller and therefore faster. And bun was built for quick startup and installation speed, good especially if you have a CI/ CD pipeline that has a LOT of packages to install each time the tests run.

NPM, released in 2010, is the Node Package Manager for Node.js, a JavaScript Runtime Environment. According to NodeJS.org's An introduction to the npm package manager, "The npm installs, updates and manages downloads of dependencies of your project. Dependencies are pre-built pieces of code, such as libraries and packages, that your Node.js application needs to work". NPM comes with NPX (Node Package eXecute) is a command-line tool that runs third-party code, known as packages or dependencies, such as Playwright.

Yarn https://yarnpkg.com/, released in 2016, is Facebook's answer to NPM. Facebook needed a lot of JavaScript packages downloaded at the same time. NPM downloaded them only sequentially, one after another, causing it to be very slow the bigger the project became. According to the Engineering at Meta blog article Yarn: A new package manager for JavaScript, "As the size of [Facebook's] codebase and the number of engineers grew, we ran into problems with consistency, security, and performance".

Pnpm (Performant npm) is another JavaScript package manager, released in 2017. It uses symbolic links to organize the node_modules, increasing performance by decreasing the number of files needed.

Bun https://bun.sh released in 2021 and purchased by Anthropic in 2025, isn't just a package manager like NPM. It is a JavaScript runtime environment that was built to replace Node.js.

In spite of the differences, there are many similarities between these package managers:

Package Registry: All tools fetch packages from the official npmjs.com site.
Manifest File: They all rely on package.json to read and write project dependencies and scripts. They show the name, version, package manager, license, and more (See NPM Docs / Package.json or Yarn Package / Manifest )
Dependency Folders: Each tool downloads packages into a local node_modules folder inside your project directory.
Lockfiles: They use lockfiles to ensure reproducible builds across different environments, such as package-lock.json. (See NPM Docs / package-lock.json)

There is also one main difference between the others and bun. NPM, Yarn, and PNMP are all built on top of Node.js. Bun is built using an entirely new language interacting with Apple's JavaScriptCore engine, developed by Apple for Safari.

NPM with V8 vs Apple's JavaScriptCore

NPM is built with V8 and Bun is built on JavaScriptCore... But what is V8 and JavaScriptCore?

According to the Codeverse Chronicle article, JavaScriptCore vs V8 Engine, "JavaScriptCore [...] , is the JavaScript engine developed by Apple. It powers the JavaScript execution within Apple's Safari browser and is also utilized in various macOS and iOS applications. JavaScriptCore is an open-source project, making its codebase accessible to developers and allowing for contributions from the community.

"JavaScriptCore is deeply integrated into the Apple ecosystem, which means it's optimized for Safari and other Apple products. This tight integration ensures excellent performance and compatibility within the Apple ecosystem.

"[The] V8 Engine is developed by Google and is widely known for powering the Chrome browser. It's also used in other projects like Node.js and various server-side applications".

About Bun

Attempting to construct a Minecraft-like game, Jarred Sumner found Next.js painfully slow when trying to save and test his work. Bun initially interacted with the JavaScriptCore engine using the Zig programming language, but converted it to the Rust programming language in 2026.

Installing Bun: https://bun.com/docs/installation
Creating a project: https://bun.com/docs/runtime/templating/create
Running a project: https://bun.com/docs/runtime
GitHub site: https://github.com/oven-sh/bun

According to the GitHub README for Bun, "At its core is the Bun runtime, a fast JavaScript runtime designed as a drop-in replacement for Node.js. It's written in Rust and powered by JavaScriptCore under the hood, dramatically reducing startup times and memory usage.

"The bun command-line tool also implements a test runner, script runner, and Node.js-compatible package manager. Instead of 1,000 node_modules for development, you only need bun. Bun's built-in tools are significantly faster than existing options and usable in existing Node.js projects with little to no changes".

There is one more thing about Bun... it was purchased by Anthropic to be used in Claude Code.

From the press release, Anthropic acquires Bun as Claude Code reaches $1B milestone:

"Bun is redefining speed and performance for modern software engineering and development. Founded by Jarred Sumner in 2021, Bun is dramatically faster than the leading competition. As an all-in-one toolkit—combining runtime, package manager, bundler, and test runner—it's become essential infrastructure for AI-led software engineering, helping developers build and test applications at unprecedented velocity.

"Bun has improved the JavaScript and TypeScript developer experience by optimizing for reliability, speed, and delight. For those using Claude Code, this acquisition means faster performance, improved stability, and new capabilities. Together, we’ll keep making Bun the best JavaScript runtime for all developers, while building even better workflows into Claude Code.

"[...] Bun represents exactly the kind of technical excellence we want to bring into Anthropic," said Mike Krieger, Chief Product Officer of Anthropic. "Jarred and his team rethought the entire JavaScript toolchain from first principles while remaining focused on real use cases. Claude Code reached $1 billion in run-rate revenue in only 6 months, and bringing the Bun team into Anthropic means we can build the infrastructure to compound that momentum and keep pace with the exponential growth in AI adoption."

"As developers increasingly build with AI, the underlying infrastructure matters more than ever—and Bun has emerged as an essential tool. Bun gets more than 7 million monthly downloads, has earned over 82,000 stars on GitHub, and has been adopted by companies like Midjourney and Lovable to increase speed and productivity.

"The decision to acquire Bun is in line with our strategic, disciplined approach to acquisitions: we will continue to pursue opportunities that bolster our technical excellence, reinforce our strength as the leader in enterprise AI, and most importantly, align with our principles and mission".

How to Install Bun

According to the GitHub README for Bun, you can install Bun on your MacBook using HomeBrew, with Curl, with NPM, or pulling down an image from Docker.

On Windows, you can use PowerShell. Since I use a Windows PC at home, I'll install it that way:

powershell -c "irm bun.sh/install.ps1 | iex"

Restarting my PowerShell Terminal, checking that bun was installed correctly:

```
bun -version
```

... And it replied I am using version 1.3.14. Wonderful! It's alive! It's .... alive! Had the installation not gone successfully, it would have errored out.

In the next blog post, we will figure out how to use bun to create a Playwright framework.

Bun Create Playwright:

Part One: Introducing bun, a new package manager and JavaScript runtime environment
Part Two: What happens when you scaffold a Playwright framework and run installed tests using bun?
Part Three: Add Type Checking and TSConfig to Bun-Create-Playwright
Part Four: Checking code with lint, formatting it with prettier
Part Five: Running Tests with Playwright Test Explorer and Generating Tests with Codegen
Part Six: How Playwright Frameworks get configured with playwright.config.ts
Part Seven: Implementing Page Objects in Playwright
Part Eight: How to Configure Playwright Test to run smoke tests, headed tests, and debug versions through scripts in package.json
Part Nine: Setting up a CI/ CD pipeline with GitLab: Quality, Test and Report
Part Ten: How Developers Can Test Their Feature Branch Against Various Playwright Configurations Before Creating a Merge Request in GitLab CI/CD
Part Eleven: Examining the artifacts job of a Playwright GitLab CI / CD pipeline
Part Twelve: Publishing Playwright HTML reports on GitLab Pages
GitLab: https://gitlab.com/tjmaher/bun-create-playwright

Happy Testing!

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles

Does giving a presentation via Zoom to the Sydney Testers Meetup make me an international speaker?

2026-06-29T20:51:55.895-04:00

If I presentation to the Sydney Testers Meetup in Australia, from my home in the Massachusetts, through Zoom, does that make me an international speaker? [ Vote in the New Poll, on LinkedIn ]

There is still time to sign up for the event at: https://www.meetup.com/sydney-testers/events/315166776

"T.J. Maher, the former organiser at Ministry of Testing Boston, blogger and speaker, will be presenting from the US on using the Detox framework to create effective test automation frameworks for React Native applications.

"Building a React Mobile Automated Test Framework using Detox + TypeScript by T.J. Maher

"Writing automated tests for a React Native mobile application is notoriously difficult. Mobile components display on the page, but are not fully loaded. Lengthy animations and slow-loading components take a while to finish. Timing issues cause your automated tests to error out giving the appearance of flaky tests.

"T.J. Maher will be sharing his experience tackling these problems using the open-source mobile testing framework, Wix's Detox, designed specifically for testing React Native applications.

* "Setting up a mobile test automation framework.

* "Vibe-coding a toy React Mobile Login page app to test against ( tinyurl.com/detox-demo ).

* "How to reduce timing issues and flakiness in automated tests.

* "Refactoring code into tests, page objects & base pages, separating out credentials and message strings for easier maintainability.

* "Setting up automated tests in CI / CD for iOS simulators and Android emulators with GitHub Action Workflows.

* "How developers can test their code before they push it into the main branch.

"About T. J. Maher:
---------------------

"A former organizer of the now defunct Ministry of Testing - Boston, T.J. Maher is a Senior Software Development Engineer in Test (SDET), based in the Boston/South Shore area of Massachusetts, with a decade of experience building web + mobile test automation frameworks. His recent work includes architecting a mobile automation framework from the ground up using Detox and TypeScript for a React Native application at SELF ID, a decentralized identity startup. Prior roles include MassMutual, Verily (Google Health), Threat Stack, Fitbit, and Intralinks.

"T.J. Maher is @tjmaher1 on LinkedIn, Twitter and BlueSky. His software testing blog is tjmaher.com.

"Follow him on LinkedIn!"

... And I am now a Senior SDET at AAA Life Insurance!

Slide Deck is at https://tinyurl.con/detox-demo-sydney

Happy Testing!

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles

Achievement Unlocked: T.J. Maher Elected to the Board of Directors of the Software Quality Group of New England - SQGNE.org

2026-06-17T19:26:28.021-04:00

I've been elected to be on the Board of Directors of the Software Quality Group of New England (sqgne.org) on the volunteer leadership committee!

The Software Quality Group of New England (SQGNE) is an all-volunteer, nonprofit professional community in New England dedicated to software quality. Since its founding, SQGNE has brought together QA engineers, SDETs, and software quality professionals for monthly educational presentations, discussions, and networking -- covering everything from testing techniques and process improvement to the latest tools and industry trends.

I also have founded and moderate an online monthly SDET Lean Coffee discussion group, bringing together software development engineers in test, quality engineers, and automation practitioners to exchange ideas, challenges, and emerging practices.

After our hiatus during the summer, we will be meeting monthly up in Burlington, MA. Check us out!

Happy Testing!

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles

Testing and AI Workshop by James Bach of Rapid Software Testing - Notes

2026-06-12T14:10:14.954-04:00

Last week, I saw that there was a new half day workshop by one of the creators of Rapid Software Testing, James Bach, Testing and AI Workshop, and that they were offering a 50% discount for anyone who was unemployed, so I just had to attend.

Visit James Bach's Satisfice.com Download Page to download PDFs on topics such as Responsible Work (May 2026), AI Writing Policy (April 2026), Heuristic Test Strategy Model (December 2024), Rapid Software Testing Explored Class Appendices (December 2024) Why Testers? (Oct 2024) and ChatGPT Sucks at Being a Testing Expert (August 2023)
YouTube Channel: Rapid Software Testing
Check out James Bach's Classes at https://www.satisfice.com/classes (50% discount if unemployed)
The next Testing and AI Workshop will be July 6, 2026

"In each session, the instructors will first perform a live 'testopsy.' This is a demonstration of AI-assisted testing (using both assistive and agentic modes of AI) on a real product, accompanied by an analysis and explanation of what happened during the demo. During this part of the workshop, you may ask questions or offer critique.

"Next the instructors will challenge you to perform a similar process or solve a similar problem with the help of AI. You will have two hours. You will be able to work alone or in groups, as you like.

"Finally, the instructors will review and critique your work, if you choose to share it. At the end of the event, you will get to keep the videos".

I really enjoyed the class! It involved an hour-and-a-half webinar, where James Bach walks people though how he uses AI, a few hours where you can work on your own project for the course, then another hour-and-a-half webinar where course attendees could review what they came up with to analyze a site.

My only problem with the course was that my rambunctious seven year old was home sick, and I wasn't able to dedicate a few hours to come up with how to use AI to test a website, since I was busy making lunch and chatting with my kiddo.

What Is the Rapid Software Testing Approach?

As a software tester, I'm familiar with some of Michael Bolton and James Bach's work on the Rapid Software Testing and Satisfice websites:

Testing vs Checking (2009) and Testing vs Checking Refined (2024)
Michael Bolton's Testers: Get Out of the Quality Assurance Business
James Bach's Test Automation Snake Oil (2021)
Cem Kaner, James Bach, and Bret Pettichord's Lessons Learned in Software Testing: A Context-Driven Approach

... Back when I was a Meetup Organizer of the Ministry of Testing - Boston, I had many fans of RST try to convince me to no longer say "Automated Testing", and say only "Automated Checking", since computer programs can't think or test. And not to say "Quality Assurance" ever, since software testers are not product owners, managers, or developers, and cannot set the schedule, assuring any quality.

Although I have never taken any of Rapid Software Testing's classes before, but I did just purchase their newly released book, Taking Testing Seriously: The Rapid Software Testing Approach (2025), though.

Not familiar with Rapid Software Testing? Watch Michael Bolton give a talk at Quality Jam 2017,

"A Ridiculously Rapid Introduction to Rapid Software Testing"

https://www.youtube.com/watch?v=AS2kuD--z44&t=3018s

Or you can take a look at James Bach & Michael Bolton's presentation to CAST2020 (The Conference for the Association for Software Testing 2020) in Austin, TX,
Testopsies Dissecting Your Testing.

James Bach, during the class, shared some documentation:

Satisfice / Download / RST Appendices, which lists more about Rapid Software Testing, and the difference between it and "Factory Style" testing such as ISTQB, Six Sigma, TQM, or RUP. It also has some sample test plans.
Responsibility is the Human Moat, covering his Principles of Responsible Work v 2.0, detailing how it is the person who is prompting the AI is responsible for the work of the AI, and have the power to reject or remediate the work the AI produces.

James Bach and his brother John ran the workshop session. It turns out that James' brother is also a software tester!

James has been experimenting with LLMs since Chat GPT came out. This experimental workshop is to help unemployed people who are trying to reskill. It isn't exactly like his three day AI and Testing class. James and John tailored this workshop to be taken in one day.

Testing is a Human activity. AI is not testing. AI can not do professional testing. AI can do exploratory analysis. But the human needs to review and validate the result. AI is just another tool a software tester can use.

An LLM can make up stories that are partially true, but it can not tell what it was thinking when exploring, since LLMs do not think.

The Application under test we would be exploring with AI? The Online Gantt Chart at https://www.onlinegantt.com/.

Principles of Responsible Work

James & John Bach and Michael Bolton just released the above listed Principles of Responsible Work paper in May 2026. In spite of all their experience, they are always trying to see how they can make things better, which resulted in these principles. Some of the principles they cover are:

"Every non-trivial business comprises some set of services that enable it to function. Examples include sales, accounting, R&D, customer support, etc. These services must be sufficiently reliable or else the business will collapse.

"Every service entails the risk of failure. When failures occur, the business must be able to recognize them and recover. In regulated industries, risk management may be subject to specific process mandates.

"A 'responsible person' is a natural person in a business who is reasonably competent, prepared, and accountable for some service that sustains or defines that business. No matter what tools or processes are used within a business, someone must be responsible for them. To bear responsibility, a person must have sufficient capacity. For instance, neither a child nor a tool (such as AI) has the capacity (either legally or socially) to bear responsibility. Even adult humans may lack capacity, such as when an airline pilot has had insufficient sleep or is under the influence of drugs.

"A 'responsible service' is one that is performed in good faith by a responsible person. This may include interpreting and following procedures, improving skills, anticipating problems, and reporting to relevant authorities or clients, both inside and outside the business". ( See James Bach's Responsibility is the Human Moat for more )

This begs the question... what is the Responsible Operation of AI?

Responsible Operation of AI

"AI cannot bear responsibility.[1] AI is not a responsible person, and it would be meaningless to speak of a tool that operates in “good faith.” Therefore, it cannot provide a responsible service, nor can responsibility be delegated to it.
"An “AI agent” is always a tool operated by a natural person, irrespective of whether the person is monitoring it in real-time.
"Thus, the operator of an AI agent always bears responsibility for the behavior of that agent.[2] This includes anticipating availability issues, such as outages, token rationing, or poor performance.
"The responsible operator must assure adequate quality of the work; they cannot merely prompt and pray.

"Therefore, the operator must…

"be sufficiently skilled in the use of the AI tool.
"be sufficiently prepared to operate the tool in that context.
"be sufficiently alert to risks, anomalies, or defects that may occur in the work.[3]
"reasonably anticipate restrictions or interruptions of the services on which the work depends.
"feel empowered (and actually have the power) to reject or remediate any work done by AI. Otherwise, the operator becomes a scapegoat, a “moral crumple zone.”[4]
avoid or mitigate the special hazards of AI operation".

( See James Bach's Responsibility is the Human Moat for more )

Special Hazards of AI Operation

Responsibility is the Human Moat details the Special Hazards of AI Operation, with categories such as:

Technological: Service Outage, Service Adulteration
Interactional: Cognitive Overload, Cognitive Debt, Cognitive Atrophy, Cognitive Surrender, Anthropomorphism and Anthropomorphizing, Automation Bias, Chronic Stress
Managerial: Data Negligence, Reckless Spending, Violations of Law, Moral Crumple Zone, Business Disruption.

What is the Moral Crumple Zone? As James Bach puts it, "This can occur in an automated system that has a human operator or supervisor (such as a self-driving car with a safety driver, or an ordinary user of ChatGPT). It happens when a failure of the system is routinely and carelessly blamed on the human. The human functions as a sort of 'crumple zone' in the moral sense: a component designed to assume blame in order to deflect it from the automation".

What can you do with AI in Testing?

Product Analysis, identifying testable elements
Risk Analysis, identifying potential problems
Test Design, generating test ideas
Test Data Synthesis
Test Oracles, analyzing output
Static Analysis, analyzing code and data structures
Test Tool Implementation

This is what James finds most interesting using AI in Testing... AI can actually allow you to create your own test tools with Claude Code. You can experiment with tools to help you test.

If you point AI at a software product, and ask it to come up with a list of features. AI is slow, clunky, expensive, and misses a lot of stuff, so it is not quite there yet.

Not sure if AI can do something? Just try it out. Ask if it can do something. Experiment.

Heuristics for Evaluating GenAI Work

To use AI responsibility, it isn't enough to ask the right questions. James Bach and Michael Bolton prepared a checklist for being critical operators of GenAI. Some of the topics on the checklist are...

"What did you do?

"How did you select the tool? What is your familiarity with the tool you used? Did you use GenAI directly or is it some tool that imposes a certain structure on your work? If the latter, what do you know about the role GenAI plays in that tool?
"How did you approach the problem? Be prepared to tell the story of your strategy for involving AI in this work. What problem specifically were you trying to solve? How did you prepare to use the AI? What part of the problem did you present to the AI? Did you use an interactive assistive approach or an agentic autonomous approach?
"How did you construct your prompts? How much and what kinds of context did you provide? Did you start simple and refine? Or did you submit a complicated one-shot prompt with explanations, supporting data, or examples?
"How did you follow-up your original prompt to shape the AI response? Were you in charge of the process? Did you control the refinement or were you constrained by the tool? Did you try the same question, or variations thereof, multiple times, or was it one connected conversation? If there were autonomous agents involved, how did you review what they did?
"How did you preserve the record of what happened? Was it stored automatically? Is any of it lost? Can you reproduce it? Can you access the logs in case you need to report in detail or perform follow-up work?

"How did it go?

"Do you fully understand what the AI produced? If challenged, can you explain and defend (or critique) each part of the work?
"What did you learn while doing this work? Did the AI surprise you in any way? Did you try a new technique? Did you learn anything important about the AI tool’s ability to handle this kind of problem? Did you get any new ideas for how you could be either more productive or else more careful with AI?
"Do you feel it gave helpful responses to your prompts? How was the first response? Were your efforts to refine that response rewarded? Did it ultimately solve the problem?
"In what way was it worth the effort and cost to solve this problem using this AI tool? Or was it not helpful? Could you have solved it in a simpler way with a web search, FAQ, or some other traditional tool?
"What is your assessment of the efficacy and reliability of this AI tool for this kind of work? Should users be on their guard, or is the worst-case scenario either not severe or else very improbable?

"Did you notice any specific problems with the AI responses?

"Incorrectness. Did it hallucinate, give erroneous output, or contradict the data available to it?
"Corrections. Did it ever claim to correct itself? If so, did it in fact correct itself, or did it make a new error?
"Ungrounded. Did it fail to acquire the full details of your problem? Did it make silent, risky assumptions?
"Unnecessary. Did it provide anything that was unhelpful or wasteful?
"Omission. Could something important be missing from its output? Were there any important matters that it only acknowledged after you prompted it to do so?
"Bias. In what ways might it have been biased? To detect bias, you might need to consider other methods of solving the problem, including solving it yourself and comparing your assumptions to the AI.
"Incongruence or Self-Repudiation. Did it make claims and later repudiate them? Did it say it would follow a procedure and then fail to follow it?
"Awkward Interaction. If the process was conversational, did you feel rushed or overwhelmed during it? Did the AI lose track of questions or forget the state of the interaction? Were you in control during the process? Was the AI too accommodating, sycophantic, or placating?
"Required Intervention. What part of its helpful responses depended on you to guide or correct it? If you had not been vigilant and provided only blank encouragement, would it have given a poor solution? Could a complete novice with no education or training have reached a good result using this AI tool?

"How specifically did you evaluate the responses?

"Thoroughness. How closely and carefully did you study what the AI did? What evidence do you have that it performed acceptably? This can be a time-consuming process, so it’s common for users to perform only minimal checking of the output. However, GenAI is very good at creating credible and confident responses that are completely wrong. Never trust your first impression of GenAI responses.
"Testable Output. Did the tool provide supporting data or any other feature that helped you evaluate its output? What references did it provide? What indications of its thinking? What kind of metadata? How helpful was its formatting of the response? How did it guide you to help you understand the output?
"Possible Blind Spots. In what way could the AI have given you an erroneous or otherwise problematic response without you knowing it? Are there plausible-seeming facts in the response that you didn’t check and about which you have no personal knowledge? Is there any content that might be incomplete? If GenAI performs any operations or transformations on data, could it have dropped some of that data?

"Now what?

"Double down on this approach? Maybe this experience showed promise, and you want to go further with it and complete the work.
"Drop it and try something else? Maybe the journey was the reward. Maybe you’ve already gotten what you need from this without needing to preserve any of the specific results that the AI gave you. Maybe this approach to solving the problem didn’t work and you should try something else.
"Consult with co-workers or clients about it? Remember that your reputation could depend on how others feel about your work. You might to run it by them and see what they think. They may have ideas for improving it, or concerns to share with you about it.
"Raise concerns about using AI for this kind of work? Did the AI do anything that scared you or represented a specific hazard that you should escalate?
"Test it more? Maybe you’re not sure what you’ve got and need more information to have an opinion. You can analyze what you’ve got or gather more information so you CAN analyze it.
Define or modify a protocol for using AI to do this? Maybe you know enough to make decisions about how you or your company will apply AI to problems of this kind".

Using AI to Test: Demo

James Bach demoed testing The Online Gantt Chart at https://www.onlinegantt.com/ with prompts using Chat GPT and Claude Code.

James kept track of his work in a worksheet based on his "Session Based Test Management" worksheet ( Download PDF ) he and his brother developed at Hewlett Packard, he tracks time testing, metrics, etc.

During the first part, a Survey Session, James was trying to see what he can manually explore and discover. How can you use this tool? What are the boundaries for text boxes? James did a preliminary analysis on what you can start exploring with AI.

James, after exploring for a bit, went to the setting screen, took the raw Document Object Model code of the web app, and add it to Chat GPT:

Prompt: "Analyze the settings for onlinegannt and list them for me"

Chat GPT then created an outline of all the settings.

Could you have told ChatGPT and get the information itself? Yes, but Chat GPT cannot press buttons. It might not have been able to go to the Settings screen. Sometimes, you don't want to "Prompt and Pray".

Prompt: "I would like to do combinatorial testing on the factors in this settings panel. What combinations do you suggest?"

James is doing what he calls "step back prompting". Start with a general prompt to see what information he can get, a soft prompt.

A "hardened prompt" is very specific. James doesn't start off with this because he is worried what the biases of the LLM are.

James also doesn't want to experience cognitive overload, receiving more information that he can process. He is exploring the app using AI to find subtle bugs he might miss.

Ask Yourself: What Is The Main Thing We Need to Test?

With the Online Gannt chart, the main thing we need to test is the display. If information is corrupted, if task get dropped, this product is useless.

Focus on: Is it usable? Reasonably charismatic?

James notices that as input, it accepts GANTT Files. If you want to enter a lot of data to see how the app handles it, you don't want to do it by hand. You can use AI to help you out.

Using AI To Create Tools

How can you generate a lot of data? You can use Claude Code to create a tool.

James took a GANTT file, saved it to an empty directory.

Prompt: "The file onlineganntt.gantt is a json that describes schedule data for a gantt chart. I need a Pythin program that generates random schedules that will enable me to test gantt charting software. The program must produce random schedules with N tasks (N is specific on the command line). The task should be between 1 and 10 days in length and connected using various dependency relations including no relation. Give the tasks generic self-descriptive names. The tool should process properly formatted JSON file with the suffix '.gantt' plus a csv table listing the details for each different task (for use as an oracle)."

What is an oracle? It is a principle or mechanism by which you recognize a problem. Rather than being a rigid, absolute tool that delivers binary "pass" or "fail" checkmarks, Rapid Software Testing treats an oracle as a heuristic -- a fallible, experience-based guideline that points you in the right direction but can occasionally fail or mislead you.

If this prompt is successful, James would get a data file he would be able to input into Online Gantt.

With the CSV file, we will be able to check for accuracy in case the AI had messed up generating the file. Testing the Import functionality is part of our tests.

Setting Claude protocols using Claude.md

James has in his claude.md file for Claude Code, where it has been told to push back and ask questions on any prompts

"Critical Working Protocol:

"When I ask you do do something for me, or produce text, code, or anything else, ask questions to get more information about any ambiguous and critical matters.
"During any task, identify any risky or critical assumptions that either you or I may be making. Declare those assumptions.
"Present a plan and get approval before taking action. Write the plan to a file called "plan-[project]-[date]-[ordinal value].md". The plans file should be stored in a plans directory that is located in the project directory. The plan file MUST include the full text of my prompt that immediately precipitated that plan.
"Before writing new code, always inform me of existing tools (command-line utilities, libraries, or open-source projects) that could fulfill the need. I want a detailed analysis. Include a section called 'Existing Solutions' that includes this information when asking clarifying questions or presenting plans.
"If multiple approaches exist (built-in tools vs writing code), present all options with trade-offs so I can choose.
"If I ask for analysis, always put it into a file. If I don't say otherwise, perform a detailed analysis with high effort"

"Testing:

"DO NOT TEST anything you write for me, unless I ask you to.
"When you write code and it is ready to try, let me try it first and I will report any problems

"Git Style:

."I want to be able to revert to earlier versions if I don't like the current version.
"Do not commit anything to Git unless the file is already being tracked."

When Claude started thinking about the problem, it then pushed back asking about task hierarchy, and alignment of subtasks, what resources to use, what the output filename should be, etc. James was then able to fine tune the prompt.

Why tell Claude not to test? James thinks it wastes tokens. Also, anything Claude claims to have tested, James does not believe it. He wants to test things out for himself. James does not want to be lulled into a false sense of security.

Ask Claude to keep a file of what you are doing

Everything you asked Claude to do will go into a file, as a record of what you were working on with Claude. Because this information is going into a file, when an employer asks, "What did you do?" you as a tester can give an answer.

It also gives you a record you can review when you are done experimenting. James needs to piece it together for an article or a blog post or in the class material.

The other day, James asked Claude to use an MCP that was connected to Playwright, and use Playwright to explore Online Gantt. It took a few days to figure out how to do it, but it worked. Claude was slow, but it did explore it and give an analysis. When James said, give me the analysis, it gave the analysis. When asked to put the analysis in a file, it churned out for five minutes a new analysis in the file, three times larger that what it gave James.

James asked, what are you doing? Why is there so much more in the file? Claude said, well, it gave on screen only an overview of the analysis.

Don't Accept Any Tool Claude Generates. Test the Tool.

After a lot of back and forth, Claude generated a tool in Python, generate_gantt.py.

Two files were produced: The file that was meant to be imported to Online Gantt, and the CSV file that had a copy of the data that could be examined in Microsoft Excel.

When the import file was uploaded, you could see that a lot of records were now showing... but were they correct?

Only by comparing the Online Gantt chart with the CSV could you see if the upload was interpreted correctly.

Careful Not To Have The AI Get Too Ahead of You!

Working with AI, James was reminded of the western trope of the cowboy being dragged by horses across the desert.

If you are being given too much data by the AI for you to process, you might want to shrug without reviewing it all, and think that if the first few results were fine, the rest of the results were fine.

It is best to work iteratively, one step at a time. Manage your cognitive load carefully.

Remember: You Need To Explain What You Are Doing With AI!

Once you finish a test session, ask yourself (and take notes on):

What did you do?
How did it go?
Did you notice any specific problems with the AI responses?
How specifically did you evaluate the responses?
Now what?

These are discussed above with the Heuristics for Evaluating GenAI Work by James Bach.

These reports you are having AI generate are good as a reference for yourself. It still might have hallucinations, but might be good enough for you. Recognize it might not be good enough for your employer. Do not give your employer any AI sloppiness that would waste their time. You need to do your due diligence.

People will need to trust you, trust your work, and trust you are using AI well, James mentioned. If you do not review the work, you are responsible for any mistakes the AI might have made.

As you practice using AI with testing, James predicts that one of the skills will be how to be efficient and effective in your use of tokens.

James relayed a time when a prompt he was doing was set up to retry on a failure. The AI then retried the same prompt 500 times in an hour. It didn't cost much, only ten dollars, but he just burned through ten dollars because of the tooling he was using.

There are some things that the current generation of AI does really well, such as figuring out data formats. Before, he would try to figure it out first, then give it to the AI. Now? He doesn't have to do that. Most of the time it figures it out and does it well. His default approach is give it the raw file it needs and stand back. If it fails, then step in.

Some things AI does not do well. If you ask it directly on questions you should ask when putting together a test plan, it may list out the fifteen things you need to ask yourself. But, if it starts "testing", it will not do that. This is because AI is not a good tester, since it gets its information from the internet, and most people on the internet are not a good testers.

You can try to make AI to be a better tester, by giving it such as James Bach's Heuristic Test Strategy Model (Download PDF). James was thinking about creating a file which details "What is Rapid Software Testing"?

... James said that maybe by then next time this session is run, he can create a skill for Claude that has this skill?

Be cautious when analyzing long lists of results

James mentioned that when you are reviewing the list of what was examined by AI, you need to ask yourself, "What's not here? What did the AI not tell me"

There is a certain cognitive bias called the part-set cuing effect.

In the Wikipedia page, under "Memory Inhibition", "The 'part-set cuing effect' was initially discovered by Slamecka (1968), who found that providing a portion of to-be-remembered items as test cues often impairs retrieval of the remaining un-cued items compared with performance in a no-cue (free-recall) control condition".

James described it as such, "If someone said, I need you to think about all the fruits that you can, for instance, apples, bananas, pineapples, lemons, oranges", it's harder to think of other types of fruit, since your brain says, "Yep, those are fruit!". If you weren't given anything, your brain can think of more things. To protect yourself, before you see what AI comes up with, scribble down your ideas first.

New Podcast: Humans in the Way

James Bach mentioned that he started a new podcast on the Rapid Software Testing YouTube channel, called Humans in the Way. He takes things that AI can do, breaks it down and analyze it.

Humans in the Way #1

https://youtu.be/X1dWeqYlF74?si=JWcSDS6bBhtJL6iT

Happy Testing!

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles

New Position Unlocked: Senior SDET at AAA Life Insurance, starting Monday, June 15th, 2026!

2026-06-03T22:16:39.326-04:00

I have two announcements: I've accepted a job offer as a Senior SDET role at AAA Life Insurance Company, and will be starting Monday, June 15th! And I have been nominated to be one of the volunteer Directors on the leadership board of the Software Quality Group of New England.

Man, the job market is brutal! It took me four months of job searching in 2025 to find SELF Id when MassMutual outsourced its technology department. And it took me four months of near constant job searching in 2026 to find AAA Life when I was caught up in the second round of SELF's layoffs in the end of January.

After throwing countless resumes into the void, submitting post after post on LinkedIn, experimenting with countless automation frameworks and programming projects on tjmaher.com, and spamming my entire LinkedIn Network (sorry about that!), and everyone I have worked with in the past twenty years as a software tester, desperately looking for job leads, it was a staffing firm working for AAA Life who found me. Thank you, Refactor Talent! Rewriting my LinkedIn Resume to make sure that I was using proper keywords in my "About" section of my LinkedIn Profile seems to have done the trick!

I'd also like to announce that I found another awesome software testing community to be a part of: The Software Quality Group of New England, a local non-profit meeting monthly in Burlington, MA. Come join us! And we are always looking for in-person speakers.

I've been missing being part of a software testing community! I was Meetup Organizer for the now defunct Ministry of Testing - Boston group from 2016 to 2024, loving every minute I was trying to find speakers, sponsors and hosts. I made so many great connections during my tenure. It's sad the Meetup group was shut down by the Ministry of Testing UK a few months ago, but I am glad to be part of a new software testing group!

In the past month as a new member of the SQGNE, I have:
* Given a talk to the group on building a mobile automation test framework
* Set up a monthly lunchtime discussion group that I'm planning to have meet the first Tuesday of each month.
* Been nominated to be one of the three Directors on the SQGNE leadership committee.

Check us out at SQGNE.org!

If you are in Massachusetts and are looking for a software testing group to present to, we are building out our calendar for the 2026 - 2027 right season now.

Join the SQGNE LinkedIn Group! https://lnkd.in/eNYUMG24

Thank you so much, everyone, for all of your support during my job search. It is really appreciated!

Happy Testing!

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles

SDET Lean Coffee #1: With AI, what is useful testing and what is workslop? SQGNE, June 2, 2026

2026-06-02T16:35:29.876-04:00

With AI, what is useful when it comes to testing and what is workslop? How do you create workflows in AI? With AI producing massive amounts of code, how can a tester keep up?

These are some of the topics attendees decided to talk about in our first ever SDET Lean Coffee, as part of the Software Quality Group of New England ( sqgne.org ). We exchanged war stories, horror stories, shared insights, and provided a bit of group therapy as we talked about the stress involved being the main support role of the software development team.

A surprise guest was Lisa Crispin (LisaCrispin.com), author of "Agile Testing: A Practical Guide for Testers and Agile Teams". Lisa has been working with DORA, Google Cloud's DevOps Research and Assessment division.

Recently, Lisa gave a talk teaming up with the "Beyond Quality" podcast, sharing what she has been doing "AI, testing, and the DORA AI Capabilities Model" at Lisa's site at https://lisacrispin.com/2026/04/20/ai-testing-and-the-dora-ai-capabilities-model/ discussing:

The Dora AI Capabilitues Model
How we need to test AI agents since AI agents can degrade over time

What is a "Lean Coffee"?

"Lean Coffee is a structured, but agenda-less meeting. Participants gather, build an agenda, and begin talking. Conversations are directed and productive because the agenda for the meeting was democratically generated". This format arose over fifteen years ago, when "Jim Benson and Jeremy Lightsmith wanted to start a group that would discuss Lean techniques in knowledge work – but didn’t want to start a whole new cumbersome organization with steering committees, speakers, and such. They wanted a group that did not rely on anything other than people showing up and wanting to learn or create", according to LeanCoffee.org.

When Is The Next SDET Lean Coffee?

SDET Lean Coffees for the SQGNE will (usually) be held the first Tuesday of each month at 12:00 pm to 1:00 pm EDT.

Interested in attending the next session Tuesday, July 7th?

Register at the Software Quality Group of New England website at https://www.sqgne.org/

Happy Testing!
-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles

Come join us at the next SQGNE Meeting! Open-Source Malware: Defending Your Software Supply Chain From Evolving Threats - June 17, 2026

2026-06-01T22:34:08.323-04:00

"Open-Source Malware: Defending Your Software Supply Chain From Evolving Threats" will be the topic of the next Software Quality Group of New England (sqgne.org) meeting.

Speaker: Bryan Whyte, CISSP Director, Solutions Engineering @Sonatype

Date: June 17, 2026 @ 6:00 pm

Join us on Zoom or in person at Burlington, MA ( Register Here )

"Bryan Whyte breaks down the latest wave of open source malware, explains how these threats diverge from traditional vulnerabilities, and shares actionable steps for organizations to defend mission-critical software.

"As organizations deepen their reliance on open-source software, evolving security threats are reshaping the landscape at an unprecedented pace.

"Threat actors are now increasingly targeting development pipelines and trusted ecosystems like npm to orchestrate supply chain attacks with significant downstream impact. Incidents such as the 2025 Shai-Hulud npm campaign, the XZ Utils backdoor, and the widespread compromise of over 23,000 GitHub repositories illustrate how open-source malware has quickly become a critical, top-tier threat built to evade legacy scanning and exploit trust woven into modern delivery pipelines.

"--The shifting tactics of threat actors targeting npm, PyPi, GitHub, and development pipelines

"--Key differences between open-source malware and traditional malware or vulnerabilities

"--The most prevalent malware types and tactics driving today's software supply chain attacks

"After spending 20 years in software development, Bryan started his journey into Application Security in 2015 with the AppScan tool suite for Static, Dynamic and Mobile Application Security Testing. In 2018, he expanded his Cybersecurity proficiency, earning the Certified Information Systems Security Professional (CISSP). In 2019, he was excited to join Sonatype due to the explosive growth of open-source software, which has made Software Composition Analysis (SCA) a critical aspect of Application Security".

See you there!

Happy Testing!

-T.J. Maher
Software Engineer in Test
BlueSky | YouTube | LinkedIn | Articles

Need a speaker at your Software Testing Meetup? How about a talk about putting together a React Native mobile testing framework?

2026-05-29T20:22:04.090-04:00

Are any software testing Meetups looking for a speaker? I have a talk, all ready to go!

After surviving the first round of layoffs last December, I scrambled to organize my research notes on building a mobile automation framework into a presentation. I managed to finish it days before I was hit by the second round of layoffs at the end of this January.

So far, I have given my presentation, Building a React Mobile Automated Test Framework Using Detox + TypeScript to:

TestGuild.com Automation Guild 2026 via Zoom (4/6/2026)
Software Quality Group of New England ( SQGNE ) @ SCRUM.org, Burlington, MA - https://tinyurl.com/detox-demo-sqgne (5/20/2026)
Sydney Testers Meetup via Zoom (scheduled on 6/30/2026)

Two Questions:

If I give a talk to a software testing Meetup in Australia via Zoom, even though I never left my home office in Massachusetts, would I be considered an "International Speaker"?
Does anyone else want me to volunteer to speak at their software testing meetup? The SQGNE season is ending for the summer, so I will have some time available.

Happy Testing!

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles

Practicing Playwright: API Testing, Intercepting Network Requests, and Mocking APIs

2026-05-27T22:20:30.432-04:00

How would you intercept a network request and use the data for assertions? Mock a network request using those assertions? And make sure that all data is loaded in the UI before making your assertions, and that all tests can pass when run?

We will be walking through Butch Mayhew's code that answers all of these questions, part of his LinkedIn Learning course: Playwright Essential Training. We will be examining the shopping cart test site PracticeSoftwareTesting.com and looking at code on Butch's companion GitHub site on how to mock out the API and use them in the UI tests.

Playwright has a lot of features when it comes to API testing. You can intercept network requests, aborting, modifying, and mocking network requests. You can also simulate a slow network. This is all done through the Playwright methods: page.route.

A route is the specific path or URL a client uses to request data or trigger a function on a server. GET /product would be an API call that gets everything from the address string called products, which then retrieves all products from the API endpoint called "products". The endpoint is "products" and the route is the name that accesses the endpoint.

The Playwright API has a method called route, which allows Playwright to monitor and modify browser network traffic.

Playwright.dev / Docs / Network: https://playwright.dev/docs/network
Playwright and page.route: https://playwright.dev/docs/api/class-route
Playwright Mocking API Guide: https://playwright.dev/docs/mock

Adding page.route to your test allows you to do things such as:

abort the route request with route.abort(), simulating various error codes such as accessdenied, addressunreachable, blockedbyclient, blockedbyresponse, connection aborted, connectionclosed, timedout, etc.
continue sending the route's request with optional overrides such as changing the request URL, the headers, the method such as GET or POST, and the post data of the request.
fetch the request without yet fulfilling it, so the response can be saved, modified, and fulfilled later. You can also change the HTTP headers, follow redirects automatically, etc.
fulfill the route's request.
request that the request is routed.

About Our Site Under Test

PracticeSoftwareTesting.com is a shopping cart with a web-based front-end pulling data from a web-based back end. Tools can be filtered out by category, such as hand tools (hammer, hand saw, wrench), and power tools ( grinder, sander, saw ) and by brand, such as ForgeFlex Tools and MightyCraft Hardware. Check the appropriate check box, and cards are display in a grid fashion of products.

These products can also be sorted, such as by "Name (A - Z)" and ""Name (Z - A)"

Explore the HTML of the site by opening up Google Chrome, right clicking on the first product in the grid to "Inspect" to open Chrome Dev Tools and look at the Elements tab to find locators:

Product Grid: Class col-md-9

This class can be used as a locator to find the product grid.

About the Products API

Let's see an example product returned by the Products API Endpoint:

Go to https://practicesoftwaretesting.com/
Under the Filters category, check the checkbox "Saw" under "Power Tools". You will see one item display: a circular saw.

But where did the product information come from?

Under Chrome Developer Tools, select the "Network" tab
Uncheck and then check the "Saw" checkbox, and you will see a new products query at the bottom looking like products?page=page=0... select that.
Select the "Response" tab.

  
"current_page": 1,
    "data": [
        {
            "id": "01KSMVRWS80N7909CZTE7ACJQS",
            "name": "Circular Saw",
            "description": "Portable circular saw powered by a robust ...",
            "price": 80.19,
            "is_location_offer": false,
            "is_rental": false,
            "co2_rating": "D",
            "in_stock": true,
            "is_eco_friendly": false,
            ...
            "category": {
                "id": "01KSMVRWMQCBR9XDQ5TGC47MS6",
                "name": "Saw",
                "slug": "saw"
            },
            "brand": {
                "id": "01KSMVRW6HT9HQZ2E113FQEFX7",
                "name": "ForgeFlex Tools"
            }
        }

All this data was returned in a JSON format when the web app took the information in the filter and made the call to the product API

https://api.practicesoftwaretesting.com/products?page=0&between=price,1,100&by_category=01KSMVRWMQCBR9XDQ5TGC47MS6&is_rental=false

All these parameters can be used to test out how your UI behaves under various conditions.

How to Intercept Network Responses

We can intercept the information coming back from the API using route.fetch and then using route.continue:

await page.route(
  "https://api.practicesoftwaretesting.com/products**"
  async (route) => {
    const response = await route.fetch();
    products = await response.json();
    route.continue();
  }
};

A glob, or "global command", is a pattern of characters used to find files, folders, or web addresses. The "**" is a globbing wildcard that matches all the nested folders which come after it. Had Butch used only one "*" it would have only returned the next level in the folder hierarchy.

What does this code do?

await page.route: Tells Playwright to listen to network requests that match this URL pattern.
async (route): Creates a callback function that triggers each time a call is made.
const response: Declares a new constant variable called "response" where we will store the HTTP response retrieved.
await route.fetch(): Performs the actual network request and retrieve the reponse.
products = await response.json: Extracts the reponse payload as a JavaScript Object (JSON) and assigns it to a variable named "products".
route.continue: Proceed with the original request.

How to Abort API Requests

Why would we want to abort a certain network call? Butch mentions in his LinkedIn Learning class how a certain pop up was interfering with a UI test he was writing.

You can also use route.abort in order to simulate the Product API being down, and check to see that the UI is behaving as it should.

Sample code Butch listed:

await page.route(
  "https://api.practicesoftwaretesting.com/products**"
  (route) => route.abort()
};

With this code, we are seeking to intercept anything from the Products API, and when the match is found, cancel the network request before it ever reaches the server.

How to Mock a Product

Let's say we want to see how our UI behaves with product names that are quite long, prices with many digits, or if a product is in stock. We can add these test products to the database and then search for them, or we can:

Capture the response
Alter any of the fields returned
Submit that mock data as if coming from the API itself.



await page.route(
  "https://api.practicesoftwaretesting.com/products**"
  async (route) => {
    const response = await route.fetch();
    const json = await response.json();
    json.data[0]["name"] = "Mocked Product";
    json.data[0]["price"] = 100000.01;
    json.data[0]["in_stock"] = false;

    await route.fulfill({ response, json }  ))
  }
};

... For this, we are editing the name, price, and the variable to see if the item is in stock or out of stock.

json.data[0] represents the very first product listed.

How to Mock API Requests with HAR files

If you want to capture all HTTP traffic and store it, you can store it in an HTTP Archive Record, or HAR file.

According to Playwright.dev, a "HAR file is an HTTP Archive file that contains a record of all the network requests that are made when a page is loaded. It contains information about the request and response headers, cookies, content, timings, and more. You can use HAR files to mock network requests in your tests. You'll need to: 1) Record a HAR file. 2) Commit the HAR file alongside the tests. 3) Route requests using the saved HAR files in the tests.

"To record a HAR file we use page.routeFromHAR() or browserContext.routeFromHAR() method. This method takes in the path to the HAR file and an optional object of options. The options object can contain the URL so that only requests with the URL matching the specified glob pattern will be served from the HAR File. If not specified, all requests will be served from the HAR file.

"Setting update option to true will create or update the HAR file with the actual network information instead of serving the requests from the HAR file. Use it when creating a test to populate the HAR with real data".

await page.routeFromHAR(".hars/product.har", {
  url: "https://api.practicesoftwaretesting.com/products**"
  update: false,
});

With this code we are:

Telling Playwright to intercept all network traffic for the current page using a recorded HAR file and store it in the root directory folder we are calling ".hars" in the file "product.har".
Update: false runs the test in playback mode. We can run the test once with "update: true" to capture and store the information, then reset it to "update: false" to not have the data overwritten.

The problem with this approach is that sensitive data such as passwords might be part of the HAR file. To sanitize sensitive data, see the Medium article: HARmageddon is cancelled: how we taught Playwright to replay HAR with dynamic parameters

Simulating Slow API Requests

Let's say we want to see how the UI responds when it takes a good 4 seconds (4000 milliseconds) for the API to respond.

await page.route(
  "https://api.practicesoftwaretesting.com/products**"
  async (route) => {
    await page.waitForTimeout(4000)
    await route.continue();
  }
};

We can then add a bit of lag into the system, then continue as normal.

Write a Test: Validating Brands

Putting together Butch's lessons above, Butch had an exercise listed: How can you validate the brands listed in the Filter on the web site matches the ones listed in the brand endpoint? And how can you do it by intercepting network data?

If you go to https://practicesoftwaretesting.com/ you can see that under the Filters, there are two major brands: ForgeFlexTools and MightyCraft Hardware.

As mentioned earlier, these products can be sorted, such as by "Name (A - Z)" and ""Name (Z - A)"

Explore the HTML of the site by opening up Google Chrome, right clicking on the first product in the grid to "Inspect" to open Chrome Dev Tools and look at the Elements tab to find locators:

Product Grid: Class col-md-9

This class can be used as a locator to find the product grid.

We can get the information about the brands from the API, which Butch stored in the .env file as API_URL.

Using this information, we can write an end-to-end test to verify that the dynamic brand data loads correctly on a web page.

This test verifies that the web application displays a list of product brands on its front end by intercepting the backend API network responses.

home.spec.ts

test("validate brands by intercepting network data", async ({ page }) => {
  let brands: any;
  const apiUrl = process.env.API_URL;
  await test.step("intercept /brands", async () => {
    await page.route(apiUrl + "/brands", async (route) => {
      const response = await route.fetch();
      brands = await response.json();
      route.continue();
    });
  });
  await page.goto("/");

  const productGrid = page.locator(".col-md-9");
  await expect(productGrid).toBeVisible();
  await expect(page.locator(".skeleton").first()).not.toBeVisible();

  const brandFilterSection = page.getByText("SortName (A - Z)Name (Z - A)");

  for (const brand of brands) {
    await expect(brandFilterSection).toContainText(brand.name);
  }
});

tests/homepage/home.spec.ts

let brands: any: Declaring an empty variable to store all the brands found when they are fetched from the network. It is declared outside the test step so we can use it later on. It is set to "any" in order to keep it undefined for now.
const apiUrl gets the API URL from the .env folder.
await test.step("intercept /brands: This time, instead of products, we are registering a handler that fires whenever a request matches the URL pattern of "/brands".
route.fetch makes the real network request on behalf of the browser.
response.json parses and captures the response body into the variable, "brands".
route.continue forwards the original response to the browser unchanged, so the UI renders normally.

The UI is getting the real data, with the test getting a copy of it.

Then we are doing:

page.goto("/"): Loads the page and the browser makes the call, including GET /brands.
When the page loads and the browser calls GET /brands, the handler executes and the "brands" variable we set up is populated.
page.locator: Sets up the contant variable productGrid as a locator for the product grid.
We expect the product grid to be visible, showing that the page is now loaded, and that the initial skeleton element placeholders PracticeSoftwareTesting.com has is no longer visible.

Finally, we are validating the UI data against the API data we have captured:

We locate the Brand Filter Section web element by text, where we can sort the filter.
We then loop through every single brand object that was captured in the "brand" variable.
We confirm that each brand name provided in the backend API is accurately printed as text inside the frontend filter sidebar.

Write a Test: Validating Categories By Mocking

Let's say we want to write a test that the Categories API correctly adds mocked categories and subcategories to the left side index. Butch shows an example:

home.spec.ts

test("validate categories render in UI by mocking", async ({ page }) => {
  let categories: any;
  const apiUrl = process.env.API_URL;

  await test.step("intercept /categories", async () => {
    await page.route(apiUrl + "/categories/tree", async (route) => {
      const response = await route.fetch();
      const json = await response.json();
      categories = json.data;

      json[0].name = "Mocked Category";
      if (json[0].sub_categories && json[0].sub_categories.length > 0) {
        json[0].sub_categories[0].name = "Mocked Subcategory";
      }
      await route.fulfill({ response, json });
    });
  });
  await page.goto("/");

  const productGrid = page.locator(".col-md-9");
  await expect(productGrid).toBeVisible();
  await expect(page.locator(".skeleton").first()).not.toBeVisible();

  const categoryFilterSection = page.getByText("SortName (A - Z)Name (Z - A)");

  await expect(categoryFilterSection).toContainText("Mocked Category");
  await expect(categoryFilterSection).toContainText("Mocked Subcategory");
});

tests/homepage/home.spec.ts

Walking through this code:

Create a new test:

A new Playwright test case is defines, using a page fixture.
We declare the undefined variable "categories" and add the API URL into a constant variable.
We create a new test step, letting readers know we are going to intercept the /categories data.

Intercept the response:

With page.route(apiUrl + "/categories/tree" we tell the browser to watch for and pause any outgoing requests matching /categories/tree.
Route.fetch allows the real request to fetch the real response, and store it in the variable called "response".
We then take that response in json format and place it in a variable we are calling "json".

Edit that response so the first item has "Mocked Category" and "Mocked Subcategory":

We are going to take that first name, [0] and assign it the string "Mocked Category".
If there are subcategories in that intercepted response, and the sub_categories length is greater than zero, we will assign the string to it: "Mocked Subcategory".
route.fulfill will send this modified JSON response back to the frontend application instead of the original server data.
Hopefully, in the left hand side panel of PracticeSoftwareTesting.com, under "Category" we will see "Mocked Category" and "Mocked Subcategory".

Load the Page, Wait for the Product Grid to Appear:

We set up productGrid as a web element, using the class we found .col-md-9 as a locator.
We expect the productGrid to be visible and the .skeleton to not be shown.

Expect the "Mocked Category" to appear!

We declare a new web element, categoryFilterSection, using the SortName as a locator.
Can we verify that the phrase "Mocked Category" appears? It passes!
Can we verify that the phrase "Mocked subcategory" appears? It passes!

Whew! And this is just a taste on what Playwright can do to test at the API level. You can read more in the Playwright.dev Docs which covers API Testing, and the classes API Request, API Request Context, and API Response.

Practicing Playwright:

Part One: Time to Practice Playwright!
Part Two: New Playwright Course: Playwright Essential Training by Butch Mayhew
Part Three: Hands on Automated Testing with Playwright by Butch Mayhew is the start of a wonderful conversation with the Playwright community!
Part Four: What happens when you pair Playwright with something other than TypeScript?
Part Five: Logging in by Storing and Using an Authentication Cookie in Your Automated Tests
Part Six: How to Detect Broken Images On Your Site
Part Seven: Dynamically Creating Test Data with a DataFactory
Part Eight: Visual Testing With Playwright
Part Nine: API Testing, Intercepting Network Requests, and Mocking APIs
Source Code: https://github.com/tjmaher/practicing-playwright

Happy Testing!

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles

Practicing Playwright: Visual Testing With Playwright

2026-05-21T08:46:54.520-04:00

If you want to do some basic visual checking to see if there has been any deviation from your baseline of images, you can use Playwright. It's built in! Playwright can take a snapshot of a web element, a visible viewport, or a full page, and save it in your Git repository as a baseline, failing the test if the image, page, or viewport does not match up.

Caution: From what I have been reading, this can quickly cause your code repository to balloon in size, since Chrome, Firefox, and WebKit would each store its own golden screenshot in your repo. Also, images on Mac, Windows, and Linux all appear different pixel-by-pixel. If using a CI platform, it might be best to run visual tests only on a standard Playwright Docker image, to generate and compare snapshots. According to TestQuality, "Once a suite passes 50–100 visual tests, teams need a layer that tracks run history, surfaces flaky-test patterns across cycles, and routes confirmed defects into the team's tracker — none of which lives inside the test runner itself"... I wonder if you can store images in an Amazon S3 bucket and hook that up as a virtual drive? ... no matter. That will be a blog post for another time...

Right now, we will be walking through Butch Mayhew's code he wrote for his LinkedIn Learning course, Learning Playwright, found on his companion GitHub site.

While the test is in a certain state you can a screenshot of the page or certain elements of the page and save them as a snapshot. The snapshots an be used as a baseline images to compare your current site against. This baseline can be periodically updated as the site evolves.

How does this happen? With Playwright's .toHaveScreenshot( ) to take a screenshot and the mask method that you want to leave out of the comparisons between the expected and actual screenshots.

toHaveScreenshot(name): Playwright.dev / Page Assertions

Our Test Site: PracticeSoftwareTesting.com

Butch has a series of tests for the test site Practice Software Testing ( practicesoftwaretesting.com ).

If you go to the site, you can see that there is an ever moving logo, "Toolshop Demo" which has the title "Practice Software Testing - Toolshop" . Let's write a test capturing an image of the page, leaving out the moving logo.

Butch also suggested waiting for everything to be fully loaded with "networkidle". But, according to the Playwright.dev waitForLoadState documentation, it says "Don't use this method for testing, rely on web assertions to assess readiness instead". Hrm. Let's go with that he has for now.

Writing the Visual Test

home.spec.ts

  test("visual test", async ({ page }) => {
    await page.waitForLoadState("networkidle");
    await expect(page).toHaveScreenshot("home-page-no-auth.png", {
      mask: [page.getByTitle("Practice Software Testing - Toolshop")],
    });
  });

tests / homepage / homepage.spec.ts

The first time you run this test, it fails, since there are not yet any snapshots saved. There is no golden file. The second time you run it, it will pass. If you wanted to bypass this step, and just update the snapshots for this page, you can run. This regenerates any snapshots for the assertions:

npx playwright test tests/home.spec.ts --update-snapshots

Did a snapshot not match up with the one saved?

You can investigate it in the built-in Playwright reports, showing differences outlined in red, the actual snapshot, the expected snapshots, and see them side-by-side. It also have a feature where you can move slider back and forth horizontally across the image investigating actual and expected snapshots.

Notice that the mask shows that image in an array. Need to mask a bunch of items on the page? You can add them all to the array.

You can also grab screenshots not just of whatever is in the viewport, or the full page beyond the fold, but also compare individual images, or elements such as popup windows.

Visual Comparisons

From Playwright.dev Docs / Test Snapshots: "Playwright Test includes the ability to produce and visually compare screenshots using await expect(page).toHaveScreenshot(). On first execution, Playwright test will generate reference screenshots. Subsequent runs will compare against the reference".

The ToHaveScreenshot Method

This is all part of Playwright.dev's PageAssertions class, where we are expecting the page for the actual viewable screenshot of the app to match the saved expected viewable screenshot. ( See all Options ). Options you can use:

fullPage: You can decide to capture the entire scrollable page, setting it as "true".
mask: You can tell Playwright to ignore certain areas, such as headers or footers if you are just interested in the main area of the site, finding the locators of those areas and mask them. Normally, it will be a pink box in the report to show what is masks, but you can change the maskColor in CSS color format.
threshold: How strict should colors match? Should it be strict (0) or lax (1) or somewhere in between? The default is 0.2.
omitBackground: When you want to hide the default white background and capture it as transparent.
maxDiffPixels & maxDiffPixelRatio: Shows the acceptable amount of pixels that could be different and a ratio of different pixels between 0 and 1. We can configure both using TestConfig.expect. These are turned off by default.

Matching Pixels With Pixelmatch

Playwright uses the pixelmatch JavaScript library ( https://github.com/mapbox/pixelmatch ) which is used to compare actual and expected images.

Configure Visual Checking In Playwright Config

Want to fine tune the above variables? You can update the global configuration in your playwright.config.ts file:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  expect: {
    toHaveScreenshot: {
      // Allow up to 2% of total pixels to change 
      // (handles layout shifts/dynamic content)
      maxDiffPixelRatio: 0.02, 
      
      // Increase pixel color tolerance 
      // (0.2 blends strict pixel match with visual difference)
      threshold: 0.2,          
      
      // Automatically mask dynamic elements like blinking text cursors
      caret: 'hide',           
      
      // Ensure CSS animations are frozen on the first frame
      animations: 'disabled',  
    },
  },
});

How to Compare Product Cards?

Let's say on the PracticeSoftwareTesting.com site, you wanted to create a visual comparison of the first product card. The code could look something like this:



  test('product card matches snapshot', async ({ page }) => {
    await page.goto('https://practicesoftwaretesting.com');

    // Locate a specific element -- here, the first product card
    const productCard = page.locator('[data-test="product"]').first();

    // Wait for the image inside the card to fully load before snapping
    await productCard.locator('img').waitFor({ state: 'visible' });

    // Compare element screenshot against stored baseline
    await expect(productCard).toHaveScreenshot('product-card.png');
  });

});

How To Mask Changing Elements Such As Prices?

Prices for a Shopping Cart will never remain stagnant. They are always changing.

Let's say you just want to do visual checking on the basic layout. Every time the prices change, you don't want the visual test to fail. What you can do is just mask out all the prices, which are with the ids "product-price".

// tests/full-page-screenshot.spec.ts
import { test, expect } from '@playwright/test';

test('homepage layout matches snapshot, prices masked', async ({ page }) => {
  await page.goto('https://practicesoftwaretesting.com');

  await expect(page).toHaveScreenshot('homepage.png', {
    // Mask elements whose content changes between runs
    mask: [
      page.locator('[data-test="product-price"]'),
    ],
    // Pixel-level tolerance -- useful when anti-aliasing differs
    maxDiffPixelRatio: 0.02,
  });
});

... And if you wanted even more fine tuning, you could choose to Integrate Applitools with Playwright.

Running Visual Testing in CI Platforms

Let's say you are running visual testing in a CI environment: Make sure you generate the snapshots against what is in CI, and not your local environment or there will be pixel differences.

If you are using Playwright's pre-built Docker Image (see docs ) make sure to update the images in the container you are using.

According top TestQuality.com: Playwright Visual Regression Testing: A Production Guide to Baselines, Flake, and CI, "Native Playwright visual regression is free to start and expensive to scale. The cost shows up in CI, not on day one".

The problem is that "Windows, macOS, and Linux render fonts, anti-aliasing, and pixel spacing differently. A baseline captured on a developer's Mac will fail when compared against a screenshot taken on the Linux CI runner, even when the application code has not changed".

The solution? "[A] Dockerfile based on the official Playwright image, plus docker-compose mounting screenshot volumes so developers run the same Linux rendering engine locally that the CI runner uses. A single command brings up the same environment everywhere, which eliminates 'works on my machine' visual discrepancies entirely".

How to manage them? "Playwright visual regression CI integration requires treating visual checks as a separate, isolated pipeline stage. Tag visual tests with @visual, exclude them from standard runs using --grep-invert, and execute them in a dedicated Docker step. This keeps functional feedback fast and quarantines visual flake to a controlled environment".

Any other problems? "Storage is the harder problem. Native baselines live in the Git repository, with one image per browser engine — a ten-test suite covering Chromium, Firefox, and WebKit produces thirty committed images. The repo grows fast, but the bigger pain is approval. GitHub, GitLab, and most version control UIs cannot diff images inline. When a baseline updates, the reviewer sees a binary file change with no visible context. Resolving the conflict requires pulling the branch locally, opening the images side by side, copying the new baseline into the feature branch, and pushing manually. House calls this 'GitHub diff blindness,' and it is the single biggest reason teams move off native after a few months".

Practicing Playwright:

Part One: Time to Practice Playwright!
Part Two: New Playwright Course: Playwright Essential Training by Butch Mayhew
Part Three: Hands on Automated Testing with Playwright by Butch Mayhew is the start of a wonderful conversation with the Playwright community!
Part Four: What happens when you pair Playwright with something other than TypeScript?
Part Five: Logging in by Storing and Using an Authentication Cookie in Your Automated Tests
Part Six: How to Detect Broken Images On Your Site
Part Seven: Dynamically Creating Test Data with a DataFactory
Part Eight: Visual Testing With Playwright
Part Nine: API Testing, Intercepting Network Requests, and Mocking APIs
Source Code: https://github.com/tjmaher/practicing-playwright

Happy Testing!

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles

SQGNE Lecture is tonight! Building a React Native Mobile Automated Test Framework with T.J. Maher

2026-05-20T10:12:23.230-04:00

Are you in Boston? Come hear me talk about Building a a React Native Mobile Automated Test Framework in tonight's Software Quality Group of New England meeting in Burlington, MA:

Registration Page: https://sqgne.org/n-May-2026.html
Slide Deck: https://tinyurl.com/detox-demo-sqgne

Taken from the Registration page:

"Building a React Native Mobile Automated Test Framework
Thomas F. - T.J. - Maher, Jr.

"Wednesday May 20, 2025 6:30-8:00 PM - in person (free pizza!)
Register Here

"Check in between 6:00 and 6:30 to network

"About the Presentation. . .

"Writing automated tests for a React Native mobile application is notoriously difficult. Mobile components display on the page, but are not fully loaded. Lengthy animations and slow-loading components take a while to finish. Timing issues cause your automated tests to error out giving the appearance of flaky tests.

"Thomas F. - T.J. - Maher, Jr. will be sharing his experience tackling these problems using the open-source mobile testing framework, Wix's Detox, designed specifically for testing React Native applications.

"Setting up a mobile test automation framework.
"Vibe-coding a toy React Mobile Login page app to test against ( tinyurl.com/detox-demo ).
"How to reduce timing issues and flakiness in automated tests.
"Refactoring code into tests, page objects & base pages, separating out credentials and message strings for easier maintainability.
"Setting up automated tests in CI / CD for iOS simulators and Android emulators with GitHub Action Workflows.
"How developers can test their code before they push it into the main branch".

About the Speaker. . .

"A former organizer of Ministry of Testing - Boston, Thomas (T.J.) Maher is a Software Development Engineer in Test (SDET) based in the Boston/South Shore area of Massachusetts, with a decade of experience building web + mobile test automation frameworks. His recent work includes architecting a mobile automation framework from the ground up using Detox and TypeScript for a React Native application at SELF ID, a decentralized identity startup. Prior roles include MassMutual, Verily (Google), Threat Stack, Fitbit, and Intralinks".

See you there!

Happy Testing!

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles