Speed-running a first time review of playwright
Tags: playwright, tutorial, typescript, testing
Published: 2022-03-30 05:05:45

## warning

I have only read about playwright, skimmed best practices and randomly associated articles. In this post, I'll be creating & reviewing web tests using [playwright](https://playwright.dev). 

I'll be rushing through this and taking down notes + screenshots for this post. In doing so, I'll probably miss something obvious. Let's hope I don't. 


## cli

First thing I learned ... playwright runs in headless by default. 

`npx playwright test e2e/example2.spec.ts --headed`

## report

`npx playwright show-report`

Runs a local server to host html report for latest run. Pretty happy with the standard report.

![default-html-report](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rv8zl0himyw3ppfpqp6.png)

It auto-loads the report if any test fails which is nice. Each test report is replaced with the latest so I'll have to look into timestamps to store a history of runs. 

## locators

To be honest, I spent a longer-than-expected time trying to validate a single header element.

![cannot-select-h3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pxlyppzjwnmri5sez6ql.png)
 
Nope, didn't work. 🙃
```
const title = page.locator('Checkboxes');
await expect(title).toHaveText("Playwright");
```

Nope, this didn't work either! 🤭

```
const title = page.locator('Checkboxes').textContent();
await expect(title).toEqual("Playwright");
``` 

Nope! What on Earth am I doing wrong?! 💀
```
const title = page.locator('h3');
await expect(title).toEqual("Playwright");
```

Success! I was not matching the returned element with the respective assertion function. 😎
```
const title = page.locator('h3');
await expect(title).toHaveText("Checkboxes");
```

I prefer css selectors however I've seen other playwright guides pushing to find elements via `text`. Possibly due to dynamic HTML causing attributes to change on load, whereas now the `text` is more reliable & consistent.

Speaking of css, follow [this link](https://flukeout.github.io) to the best css selector training ever.

## headless vs headed results

Super speedy. I was expecting headed to take longer across all steps. Perhaps caching played a part here. I'm not too familiar with playwright's caching & storage abilities.

### headless
![headless-results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5qiatdru2ppf9uteyr3.png)
 

### headed
![headed-results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/59dp9opo2mp9le2ozn40.png)

## configuration

I loved that `playwright.config.ts` had a ton of prefilled options and all I had to do was simply enable/disable anything I desired, rather than adding in configurations myself. 
 
## github actions

Success! Instant trigger on `git push`. Took `57s` to install playwright though. 

![test-in-action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nk8meydyna5fvhhlezv2.png)
 
## summary

Overall I am pleasantly pleased with playwright.   

![relief](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55gg5mfu7l9hkmmq82s7.gif) 

The framework itself is extremely helpful and from what I saw, comfortably covers all the essentials for web automation. It natively supports complicated features such as iframes, drag & drop, file storage and many more. 

In future I'll aim to explore its features in more detail. Farewell!