Skip to content
This repository was archived by the owner on Jan 5, 2026. It is now read-only.
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 4 additions & 14 deletions site/config.toml
Original file line number Diff line number Diff line change
Expand Up @@ -192,29 +192,19 @@ disqusShortname = "checkly"
url = "https://developers.checklyhq.com"
weight = 200

[[menu.learn_playwright]]
name = "Basics"
pre = "/learn/icons/misc.svg"
weight = 310

[[menu.learn_playwright]]
name = "Interaction"
pre = "/learn/icons/pages.svg"
weight = 320

[[menu.learn_playwright]]
name = "Getting started"
pre = "/learn/icons/playwright-logo.svg"
weight = 300

[[menu.learn_playwright]]
name = "Basics"
pre = "/learn/icons/misc.svg"
name = "Interaction"
pre = "/learn/icons/pages.svg"
weight = 310

[[menu.learn_playwright]]
name = "Interaction"
pre = "/learn/icons/pages.svg"
name = "Basics"
pre = "/learn/icons/misc.svg"
weight = 320

[[menu.learn_playwright]]
Expand Down
5 changes: 3 additions & 2 deletions site/content/guides/monitoring-as-code.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
---
title: What is monitoring as code?
title: Monitoring as Code - A Practical Guide from Checkly
displayTitle: What is monitoring as code?
description: >-
Monitoring as code is the practice of managing monitoring configurations and alerts through code. This approach offers several benefits for engineering teams at scale, including codified, version-controlled, and reusable monitoring configurations.
Learn how to implement monitoring as code with Checkly's guide. Bring transparency, scalability, and efficiency to your cloud infrastructure management.
author: Daniel Giordano
avatar: 'images/avatars/daniel-giordano.png'
tags:
Expand Down
4 changes: 2 additions & 2 deletions site/content/learn/incidents/_index.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Incident Response
title: Incident Response - Improve Recovery & Avoid Downtime
displayTitle: Learn the fundamentals of Incident Response
description: Learn Incident Response
description: Master incident response with real-world insights. Learn how to reduce downtime, regain user trust, and build a resilient incident management workflow.
date: 2025-04-07
author: Nocnica Mellifera
githubUser: serverless-mom
Expand Down
4 changes: 2 additions & 2 deletions site/content/learn/monitoring/_index.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: monitoring index
title: Monitoring Resources - Tools, Metrics & Best Practices
displayTitle: Monitoring
description: Learn Monitoring
description: Browse essential monitoring resources from Checkly. Learn key metrics, performance tools, and best practices to optimize your systems and user experience.
date: 2024-10-17
author: Nocnica Mellifera
githubUser: serverless-mom
Expand Down
2 changes: 1 addition & 1 deletion site/content/learn/playwright/assertions.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ githubUser: serverless-mom
tags:
- basics

weight: 5
weight: 90
navTitle: Assertions
menu:
learn_playwright:
Expand Down
2 changes: 1 addition & 1 deletion site/content/learn/playwright/authentication.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ tags:
- storageState
- 2fa
- cookies
weight: 3
weight: 105
navTitle: Authentication
menu:
learn_playwright:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ githubUser:
tags:
- basics

weight: 2
weight: 70
navTitle: Clicking and typing
menu:
learn_playwright:
Expand Down
2 changes: 1 addition & 1 deletion site/content/learn/playwright/codegen.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ githubUser: serverless-mom
tags:
- basics

weight: 12
weight: 40
navTitle: Codegen
menu:
learn_playwright:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ githubUser:
tags:
- basics
navTitle: Emulating mobile devices
weight: 6
weight: 130

menu:
learn_playwright:
Expand Down
2 changes: 1 addition & 1 deletion site/content/learn/playwright/generating-pdfs.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ author: Giovanni Rago
githubUser: ragog
tags:
- pdf
weight: 2
weight: 130
navTitle: Generating PDFs
menu:
learn_playwright:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ githubUser: ragog
tags:
- e2e
- assertions
weight: 3
weight: 120
navTitle: Detecting broken links
menu:
learn_playwright:
Expand Down
2 changes: 1 addition & 1 deletion site/content/learn/playwright/how-to-set-up-locally.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ author: Giovanni Rago
githubUser: ragog
tags:
- basics
weight: 2
weight: 30
displayTitle: How to Set Up Playwright Locally
navTitle: Setting up Playwright
menu:
Expand Down
2 changes: 1 addition & 1 deletion site/content/learn/playwright/iframe-interaction.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ author: Stefan Judis
githubUser: stefanjudis
tags:
- iframes
weight: 6
weight: 100
navTitle: Interacting with iframes
menu:
learn_playwright:
Expand Down
2 changes: 1 addition & 1 deletion site/content/learn/playwright/intercept-requests.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ githubUser:
- thompsonjonm
tags:
- network
weight: 4
weight: 105
navTitle: Intercepting requests
menu:
learn_playwright:
Expand Down
2 changes: 1 addition & 1 deletion site/content/learn/playwright/mock-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ githubUser:
- serverless-mom
tags:
- network
weight: 5
weight: 125
navTitle: Mocking API Responses
menu:
learn_playwright:
Expand Down
2 changes: 1 addition & 1 deletion site/content/learn/playwright/multitab-flows.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ githubUser: ragog
tags:
- multi-tab
- testing
weight: 6
weight: 135
navTitle: Multiple tabs
menu:
learn_playwright:
Expand Down
2 changes: 1 addition & 1 deletion site/content/learn/playwright/navigation.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ githubUser: tnolet
tags:
- basics

weight: 1
weight: 50
navTitle: Navigation
menu:
learn_playwright:
Expand Down
33 changes: 17 additions & 16 deletions site/content/learn/playwright/playwright-vs-cypress.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ author: Nocnica Mellifera
githubUser: serverless-mom
tags:
- basics
weight: 4
weight: 20
displayTitle: Playwright vs Cypress
navTitle: Playwright vs Cypress
menu:
Expand All @@ -16,12 +16,12 @@ menu:
---
Playwright and Cypress are two frameworks both closely associated with end-to-end testing of production websites. Both frameworks can do quite a bit more than 'making sure nothing on your site is broken' and their design philosophies, architectures, and use cases are different.

Starting in mid-2024, according to [npmtrends.com](https://npmtrends.com/cypress-vs-playwright), Playwright surpassed Cypress in npm downloads, indicating that more projects are starting with Playwright as their preferred automation framework. Playwright is the framework supported by Checkly in our current runtimes.
Starting in mid-2024, Playwright surpassed Cypress in npm downloads, indicating that more projects are starting with Playwright as their preferred automation framework. Playwright is the framework supported by Checkly in our current runtimes.

## Playwright overview
While Cypress is a testing tool, Playwright is an automation solution.
While Cypress is a testing tool, [Playwright](https://www.checklyhq.com/learn/playwright/what-is-playwright/) is an automation solution.

This distinction is important when you compare these solutions to the present day realities of automation.
This distinction is important when you compare these solutions, with Playwright supporting more features to allow for repetetive scripted actions and automations.

Playwright is a tool focused on developer productivity with more robust built-in features, the ability to use async/await, built in parallelization, a much lighter weight in CI. Playwright is also less opinionated because it doesn’t have to be, you can use it however you want. Playwright can [monitor your APIs](https://www.checklyhq.com/learn/playwright/testing-apis/) just as well as it can your frontend web pages. Scraping content for a LLM model? Check! Have a nested app in an iframe you want to test? Go wild! *Three different browser sessions in the same chat instance? Sounds cool! Re-use your tests to monitor production? Absolutely.*

Expand All @@ -41,7 +41,7 @@ Playwright is a tool focused on developer productivity with more robust built-in

With Cypress, E2E went from the painful world of hard-coded waits and heavy-handed POM approaches to built in actionability and visibility checks with a focus on community building and developer experience. What we’ve seen over the course of the last five years or so is a cultural shift in the testing world from a heavy reliance on Manual QA and non-developer owned testing responsibilities to testing as a more fully incorporated practice. We’ve shifted left.

We’ve also seen testing become the battleground of where your developer velocity goes to die.
We’ve also seen testing become the battleground of where your developer velocity goes to die. Since the inception of playwright more and more teams contain dedicated roles for platform engineering, with a focus on making development, testing, and the [deployment process](https://www.checklyhq.com/guides/empowering-developers-with-checkly/) easier for everyone.

Titles have changed, entire departments have been lost to restructures, responsibilities have adjusted and solutions that were groundbreaking less than a decade ago are now no longer cutting edge.

Expand All @@ -63,7 +63,7 @@ The main areas where Cypress loses now used to be where they won; community trus
### **Overview of Architectures**
The architectural differences between Playwright and Cypress reflect distinct design philosophies and impact how each tool interacts with browsers and testing workflows. Playwright leverages the **Chrome DevTools Protocol (CDP)** to automate browsers directly, while Cypress runs within the browser’s execution loop via a custom Electron-based app. These design choices affect browser support, performance, parallelization, and test writing practices.

---


### **Playwright Architecture**
- **CDP-based**: Playwright interacts with browsers using the Chrome DevTools Protocol, which is natively supported by major browsers (Chromium, Firefox, WebKit). This allows it to control the browser externally without modifying the browser’s native execution loop.
Expand All @@ -73,7 +73,7 @@ The architectural differences between Playwright and Cypress reflect distinct de
- **Browser & Tab Support**: Playwright supports all major browsers and multiple tabs, giving it flexibility for complex test scenarios. It also has experimental support for mobile testing.
- **Standardized Integration**: Playwright integrates smoothly with high-level testing frameworks (e.g., CucumberJS, CodeceptJS) without custom runners, as the browser behaviors remain unmodified.

---


### **Cypress Architecture**
- **Electron-based App**: Cypress runs as a native JavaScript app embedded within an Electron browser. This architecture means tests and Cypress’s custom library run **within the browser’s execution loop**, directly injecting code into the test browser.
Expand All @@ -83,7 +83,7 @@ The architectural differences between Playwright and Cypress reflect distinct de
- **Limited Parallelism**: Parallelization is not available out of the box and requires a **SaaS subscription** to Cypress Cloud for optimal parallel test execution.
- **Limited Tab and iFrame Support**: Cypress does not support multiple tabs and has limited and sometimes inconsistent iFrame handling, making it less effective for complex web applications.

---


### **Impact of Architectural Differences**

Expand All @@ -106,7 +106,7 @@ The architectural differences between Playwright and Cypress reflect distinct de
5. **Asynchronous Code Handling**
- Playwright uses standard **async/await** syntax, providing a clear, modern JavaScript interface. Cypress uses a custom dot notation that simplifies code but is not fully asynchronous, limiting flexibility.

---


### **Which Architecture Fits Your Needs?**
- **Choose Playwright** if you need cross-browser support, parallelism, and multi-language flexibility. Its architecture is more scalable for complex, multi-layered applications that demand realistic, real-world testing.
Expand All @@ -127,7 +127,7 @@ The architectural differences between Playwright and Cypress reflect distinct de
| Real Devices Support | Limited | No |
| Plugins | Relies on custom setup | Ecosystem of plugins |

---


## Playwright vs Cypress Examples
At the highest level, Playwright and Cypress tests look very similar when writing a basic tests. Differences only really become visible when you make two asynchronous requests with assertions.
Expand Down Expand Up @@ -169,13 +169,13 @@ With Cypress, we're using their custom syntax, which is a bit more compact but s

Further, Cypress asynchrony may not act as expected if we're used to asynchrony from Node.js. In Cypress, each `cy.request()` runs asynchronously, but Cypress queues them sequentially. This ensures that the second request only executes after the first one completes, making this pattern simple and effective for making multiple assertions across async requests.

---


## Playwright vs Cypress: Pros & Cons

### Playwright Pros
- Supports more browsers, including Firefox and Safari/WebKit
- Suitable for complex web apps with API, UI, and visual testing combined
- Suitable for complex web apps with [API](https://www.checklyhq.com/learn/playwright/testing-apis/), UI, and [visual testing](https://www.checklyhq.com/docs/browser-checks/visual-regression-snapshot-testing/) combined
- Superior parallelism and scalability for larger test suites
- Works on multiple platforms

Expand All @@ -194,15 +194,16 @@ Further, Cypress asynchrony may not act as expected if we're used to asynchrony
- Struggles with large-scale parallelism
- No native support for multi-language tests

---

## Playwright vs Cypress: Which Solution is Better for You?

- Choose Playwright if you need to test across multiple browsers, require advanced parallelism, or need to include API and component testing in your workflow. It’s better suited for complex, large-scale projects with multiple stakeholders.
- Choose Playwright if you need to test across multiple browsers, require advanced parallelism, or need to include API and component testing in your workflow. It’s better suited for complex, large-scale projects with multiple stakeholders. If you've been told 'that's hard to test with Cypress' there's no doubt you can do it in Playwright.
- Choose Cypress if your focus is frontend testing, or you are working on web apps that run primarily in Chrome/Edge. Cypress is more user-friendly for teams without extensive testing experience and offers quick startup time with fewer configurations.

---


## Conclusion

Both Playwright and Cypress are powerful tools, but each shines in different areas. Playwright’s versatility makes it the better choice for complex, multi-layered applications requiring scalability, while Cypress excels in simplicity and frontend testing. Your decision should align with your project’s needs, team experience, and browser requirements.
Both Playwright and Cypress are powerful tools, but each shines in different areas. Playwright’s versatility makes it the better choice for complex, multi-layered applications requiring scalability, while Cypress excels in simplicity and frontend testing. Now that you've chosen a framework, what's next?


4 changes: 2 additions & 2 deletions site/content/learn/playwright/playwright-vs-others.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@
title: Playwright vs other automation frameworks
description:
Learn how Playwright, a browser automation tool, simplifies testing across Chrome, Firefox, and WebKit. Start building more reliable web applications today.
date: 2024-05-01
date: 2025-04-01
author: Dan G
githubUser: ragog
tags:
- basics

weight: 3
weight: 20

menu:
learn_playwright:
Expand Down
2 changes: 1 addition & 1 deletion site/content/learn/playwright/playwright-vs-selenium.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ author: Nocnica Mellifera
githubUser: serverless-mom
tags:
- basics
weight: 5
weight: 20
displayTitle: Playwright vs Selenium
navTitle: Playwright vs Selenium
menu:
Expand Down
2 changes: 1 addition & 1 deletion site/content/learn/playwright/selectors.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ githubUser: serverless-mom
tags:
- basics

weight: 3
weight: 60
navTitle: UI selectors
menu:
learn_playwright:
Expand Down
2 changes: 1 addition & 1 deletion site/content/learn/playwright/taking-screenshots.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ githubUser: ragog
tags:
- basics

weight: 1
weight: 110
navTitle: Taking screenshots
menu:
learn_playwright:
Expand Down
2 changes: 1 addition & 1 deletion site/content/learn/playwright/testing-in-parallel.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ githubUser: ragog
tags:
- e2e
- assertions
weight: 3
weight: 110
navTitle: Parallel testing
menu:
learn_playwright:
Expand Down
2 changes: 1 addition & 1 deletion site/content/learn/playwright/waits-and-timeouts.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ tags:
- best practices
- waiting
navTitle: Waits and timeouts
weight: 5
weight: 70
menu:
learn_playwright:
parent: "Interaction"
Expand Down
2 changes: 1 addition & 1 deletion site/content/learn/playwright/what-is-playwright.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ githubUser: ragog
tags:
- basics

weight: 1
weight: 10
navTitle: What is Playwright?
aliases:
- /learn/playwright/getting-started/
Expand Down
Loading