diff --git a/site/config.toml b/site/config.toml index d60053692..aaf30e57f 100644 --- a/site/config.toml +++ b/site/config.toml @@ -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]] diff --git a/site/content/guides/monitoring-as-code.md b/site/content/guides/monitoring-as-code.md index 5bf2bd6cb..c509b2d15 100644 --- a/site/content/guides/monitoring-as-code.md +++ b/site/content/guides/monitoring-as-code.md @@ -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: diff --git a/site/content/learn/incidents/_index.md b/site/content/learn/incidents/_index.md index c53412fe4..a61392582 100644 --- a/site/content/learn/incidents/_index.md +++ b/site/content/learn/incidents/_index.md @@ -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 diff --git a/site/content/learn/monitoring/_index.md b/site/content/learn/monitoring/_index.md index af292ecbc..5edc6ff9d 100644 --- a/site/content/learn/monitoring/_index.md +++ b/site/content/learn/monitoring/_index.md @@ -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 diff --git a/site/content/learn/playwright/assertions.md b/site/content/learn/playwright/assertions.md index 3fc9a9a92..c457503ba 100644 --- a/site/content/learn/playwright/assertions.md +++ b/site/content/learn/playwright/assertions.md @@ -12,7 +12,7 @@ githubUser: serverless-mom tags: - basics -weight: 5 +weight: 90 navTitle: Assertions menu: learn_playwright: diff --git a/site/content/learn/playwright/authentication.md b/site/content/learn/playwright/authentication.md index 5fbe69d41..e173a6d63 100644 --- a/site/content/learn/playwright/authentication.md +++ b/site/content/learn/playwright/authentication.md @@ -11,7 +11,7 @@ tags: - storageState - 2fa - cookies -weight: 3 +weight: 105 navTitle: Authentication menu: learn_playwright: diff --git a/site/content/learn/playwright/clicking-typing-hovering.md b/site/content/learn/playwright/clicking-typing-hovering.md index e40840218..907d0ceab 100644 --- a/site/content/learn/playwright/clicking-typing-hovering.md +++ b/site/content/learn/playwright/clicking-typing-hovering.md @@ -11,7 +11,7 @@ githubUser: tags: - basics -weight: 2 +weight: 70 navTitle: Clicking and typing menu: learn_playwright: diff --git a/site/content/learn/playwright/codegen.md b/site/content/learn/playwright/codegen.md index 3d21919fe..3296bfd9b 100644 --- a/site/content/learn/playwright/codegen.md +++ b/site/content/learn/playwright/codegen.md @@ -7,7 +7,7 @@ githubUser: serverless-mom tags: - basics -weight: 12 +weight: 40 navTitle: Codegen menu: learn_playwright: diff --git a/site/content/learn/playwright/emulating-mobile-devices.md b/site/content/learn/playwright/emulating-mobile-devices.md index 7bd99e237..852554394 100644 --- a/site/content/learn/playwright/emulating-mobile-devices.md +++ b/site/content/learn/playwright/emulating-mobile-devices.md @@ -11,7 +11,7 @@ githubUser: tags: - basics navTitle: Emulating mobile devices -weight: 6 +weight: 130 menu: learn_playwright: diff --git a/site/content/learn/playwright/generating-pdfs.md b/site/content/learn/playwright/generating-pdfs.md index 3422e69ce..38c3c9e10 100644 --- a/site/content/learn/playwright/generating-pdfs.md +++ b/site/content/learn/playwright/generating-pdfs.md @@ -6,7 +6,7 @@ author: Giovanni Rago githubUser: ragog tags: - pdf -weight: 2 +weight: 130 navTitle: Generating PDFs menu: learn_playwright: diff --git a/site/content/learn/playwright/how-to-detect-broken-links.md b/site/content/learn/playwright/how-to-detect-broken-links.md index eb649cd32..d23de0131 100644 --- a/site/content/learn/playwright/how-to-detect-broken-links.md +++ b/site/content/learn/playwright/how-to-detect-broken-links.md @@ -7,7 +7,7 @@ githubUser: ragog tags: - e2e - assertions -weight: 3 +weight: 120 navTitle: Detecting broken links menu: learn_playwright: diff --git a/site/content/learn/playwright/how-to-set-up-locally.md b/site/content/learn/playwright/how-to-set-up-locally.md index 784b95ee1..c628bdc01 100644 --- a/site/content/learn/playwright/how-to-set-up-locally.md +++ b/site/content/learn/playwright/how-to-set-up-locally.md @@ -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: diff --git a/site/content/learn/playwright/iframe-interaction.md b/site/content/learn/playwright/iframe-interaction.md index 7c3ada482..8c852584b 100644 --- a/site/content/learn/playwright/iframe-interaction.md +++ b/site/content/learn/playwright/iframe-interaction.md @@ -6,7 +6,7 @@ author: Stefan Judis githubUser: stefanjudis tags: - iframes -weight: 6 +weight: 100 navTitle: Interacting with iframes menu: learn_playwright: diff --git a/site/content/learn/playwright/intercept-requests.md b/site/content/learn/playwright/intercept-requests.md index a69de1d14..306cb0873 100644 --- a/site/content/learn/playwright/intercept-requests.md +++ b/site/content/learn/playwright/intercept-requests.md @@ -10,7 +10,7 @@ githubUser: - thompsonjonm tags: - network -weight: 4 +weight: 105 navTitle: Intercepting requests menu: learn_playwright: diff --git a/site/content/learn/playwright/mock-api.md b/site/content/learn/playwright/mock-api.md index 49ee73eb1..72b121f7d 100644 --- a/site/content/learn/playwright/mock-api.md +++ b/site/content/learn/playwright/mock-api.md @@ -8,7 +8,7 @@ githubUser: - serverless-mom tags: - network -weight: 5 +weight: 125 navTitle: Mocking API Responses menu: learn_playwright: diff --git a/site/content/learn/playwright/multitab-flows.md b/site/content/learn/playwright/multitab-flows.md index 4a2325bb8..6940ee548 100644 --- a/site/content/learn/playwright/multitab-flows.md +++ b/site/content/learn/playwright/multitab-flows.md @@ -7,7 +7,7 @@ githubUser: ragog tags: - multi-tab - testing -weight: 6 +weight: 135 navTitle: Multiple tabs menu: learn_playwright: diff --git a/site/content/learn/playwright/navigation.md b/site/content/learn/playwright/navigation.md index 2e4335da7..1c912c38f 100644 --- a/site/content/learn/playwright/navigation.md +++ b/site/content/learn/playwright/navigation.md @@ -12,7 +12,7 @@ githubUser: tnolet tags: - basics -weight: 1 +weight: 50 navTitle: Navigation menu: learn_playwright: diff --git a/site/content/learn/playwright/playwright-vs-cypress.md b/site/content/learn/playwright/playwright-vs-cypress.md index 4a1b60b8f..2978ac055 100644 --- a/site/content/learn/playwright/playwright-vs-cypress.md +++ b/site/content/learn/playwright/playwright-vs-cypress.md @@ -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: @@ -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.* @@ -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. @@ -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. @@ -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. @@ -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** @@ -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. @@ -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. @@ -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 @@ -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? + + diff --git a/site/content/learn/playwright/playwright-vs-others.md b/site/content/learn/playwright/playwright-vs-others.md index fcf648989..984b1bf3e 100644 --- a/site/content/learn/playwright/playwright-vs-others.md +++ b/site/content/learn/playwright/playwright-vs-others.md @@ -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: diff --git a/site/content/learn/playwright/playwright-vs-selenium.md b/site/content/learn/playwright/playwright-vs-selenium.md index 329e79627..52c33f71f 100644 --- a/site/content/learn/playwright/playwright-vs-selenium.md +++ b/site/content/learn/playwright/playwright-vs-selenium.md @@ -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: diff --git a/site/content/learn/playwright/selectors.md b/site/content/learn/playwright/selectors.md index 47d761e4d..23fb969f0 100644 --- a/site/content/learn/playwright/selectors.md +++ b/site/content/learn/playwright/selectors.md @@ -10,7 +10,7 @@ githubUser: serverless-mom tags: - basics -weight: 3 +weight: 60 navTitle: UI selectors menu: learn_playwright: diff --git a/site/content/learn/playwright/taking-screenshots.md b/site/content/learn/playwright/taking-screenshots.md index 265d53a1b..83ade239e 100644 --- a/site/content/learn/playwright/taking-screenshots.md +++ b/site/content/learn/playwright/taking-screenshots.md @@ -7,7 +7,7 @@ githubUser: ragog tags: - basics -weight: 1 +weight: 110 navTitle: Taking screenshots menu: learn_playwright: diff --git a/site/content/learn/playwright/testing-in-parallel.md b/site/content/learn/playwright/testing-in-parallel.md index e6729387d..a5f1350b8 100644 --- a/site/content/learn/playwright/testing-in-parallel.md +++ b/site/content/learn/playwright/testing-in-parallel.md @@ -7,7 +7,7 @@ githubUser: ragog tags: - e2e - assertions -weight: 3 +weight: 110 navTitle: Parallel testing menu: learn_playwright: diff --git a/site/content/learn/playwright/waits-and-timeouts.md b/site/content/learn/playwright/waits-and-timeouts.md index 8ace34b5d..8bca1ecef 100644 --- a/site/content/learn/playwright/waits-and-timeouts.md +++ b/site/content/learn/playwright/waits-and-timeouts.md @@ -7,7 +7,7 @@ tags: - best practices - waiting navTitle: Waits and timeouts -weight: 5 +weight: 70 menu: learn_playwright: parent: "Interaction" diff --git a/site/content/learn/playwright/what-is-playwright.md b/site/content/learn/playwright/what-is-playwright.md index 04095fb3f..c987ea62a 100644 --- a/site/content/learn/playwright/what-is-playwright.md +++ b/site/content/learn/playwright/what-is-playwright.md @@ -8,7 +8,7 @@ githubUser: ragog tags: - basics -weight: 1 +weight: 10 navTitle: What is Playwright? aliases: - /learn/playwright/getting-started/