Introduce sign up cta in main #156
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
There was a problem hiding this comment.
Pull request overview
This PR introduces a new <SignUpCta> component across multiple /learn documentation pages to encourage user sign-ups, while also cleaning up content with typo corrections, clarifications, and updated statistics.
Changes:
- Introduces a reusable
<SignUpCta>component with gradient styling and call-to-action messaging - Updates Playwright documentation with improved explanations, corrected typos, and modernized content
- Adds Playwright logo SVG asset for use in the CTA component
Reviewed changes
Copilot reviewed 19 out of 22 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| snippets/sign-up-cta.mdx | New reusable sign-up CTA component with gradient styling |
| learn/playwright/what-is-playwright.mdx | Adds CTA, updates NPM download statistics, adds Checkly integration section |
| learn/playwright/waits-and-timeouts.mdx | Adds CTA, clarifies wait methods with improved formatting |
| learn/playwright/testing-in-parallel.mdx | Adds CTA, reorganizes YouTube embed placement |
| learn/playwright/taking-screenshots.mdx | Adds CTA at end of document |
| learn/playwright/selectors.mdx | Adds CTA, improves formatting, updates link references |
| learn/playwright/navigation.mdx | Adds CTA, improves actionability checks explanation, adds Warning component |
| learn/playwright/multitab-flows.mdx | Adds CTA at end of document |
| learn/playwright/intercept-requests.mdx | Adds CTA, adds new section on avoiding network interception in monitoring |
| learn/playwright/iframe-interaction.mdx | Adds CTA after code examples |
| learn/playwright/how-to-detect-broken-links.mdx | Adds CTA at end of document |
| learn/playwright/generating-pdfs.mdx | Adds CTA, clarifies header/footer template usage |
| learn/playwright/emulating-mobile-devices.mdx | Adds CTA at end of document |
| learn/playwright/codegen.mdx | Adds CTA, improves step descriptions, corrects step numbering |
| learn/playwright/clicking-typing-hovering.mdx | Adds CTA, removes alternative click methods section |
| learn/playwright/authentication.mdx | Adds CTA, fixes indentation, improves heading formatting |
| learn/playwright/assertions.mdx | Adds CTA, adds soft assertion code example, improves clarity throughout |
| images/icons/playwright.svg | New Playwright logo SVG for use in CTA component |
| detect/synthetic-monitoring/playwright-checks/overview.mdx | Emphasizes key value proposition with bold text |
| detect/synthetic-monitoring/playwright-checks/configuration.mdx | Updates max runtime from 15 to 30 minutes |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 19 out of 22 changed files in this pull request and generated 15 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| ## Growth and Adoption | ||
|
|
||
| Since its release in January 2020 by Microsoft, Playwright has experienced a surge in usage and popularity. As of March 2023, its GitHub repository has received 48.4k stars and 2.4k forks, and is currently averaging more than 1.2 million NPM downloads per week. Playwright is used by enterprise and open-source development projects alike, including Adobe Spectrum, Visual Studio Code, and React Navigation. | ||
| Since its release in January 2020 by Microsoft, Playwright has experienced a surge in usage and popularity. As of March 2023, its GitHub repository has received 48.4k stars and 2.4k forks, and is currently averaging more than 32 million NPM downloads per week. Playwright is used by enterprise and open-source development projects alike, including Adobe Spectrum, Visual Studio Code, and React Navigation. |
There was a problem hiding this comment.
The text states "As of March 2023" but then claims "32 million NPM downloads per week". This seems like outdated information being updated, but the date "As of March 2023" is now quite old (it's January 2026). Consider updating the date reference to reflect when these statistics were last verified, or remove the temporal reference entirely to avoid the content appearing stale.
Suggested change
| Since its release in January 2020 by Microsoft, Playwright has experienced a surge in usage and popularity. As of March 2023, its GitHub repository has received 48.4k stars and 2.4k forks, and is currently averaging more than 32 million NPM downloads per week. Playwright is used by enterprise and open-source development projects alike, including Adobe Spectrum, Visual Studio Code, and React Navigation. | |
| Since its release in January 2020 by Microsoft, Playwright has experienced a surge in usage and popularity. Its GitHub repository has received 48.4k stars and 2.4k forks, and is currently averaging more than 32 million NPM downloads per week. Playwright is used by enterprise and open-source development projects alike, including Adobe Spectrum, Visual Studio Code, and React Navigation. |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
guolau
requested changes
Jan 20, 2026
Contributor
guolau
left a comment
guolau
left a comment
There was a problem hiding this comment.
A few small nits 🙂
Thanks for going through these pages!
|
|
||
| ### Test execution issues | ||
|
|
||
| **Tests exceed 20-minute limit** |
Contributor
There was a problem hiding this comment.
Suggested change
| **Tests exceed 30-minute limit** |
|
|
||
| **Tests exceed 20-minute limit** | ||
|
|
||
| If your Playwright Check Suite times out after 20 minutes: |
Contributor
There was a problem hiding this comment.
Suggested change
| If your Playwright Check Suite times out after 30 minutes: |
| ``` | ||
|
|
||
| In this case if the response has a 200 status code but the API response time is more than 200 seconds, the status of this check will be degraded and the slow api response time will be included as a failed step. If the response came back as a non-200 status (indicating an error) then the check would be ‘failed,’ whether or not `markCheckAsDegraded` was called. You can [configure alert channels](https://www.checklyhq.com/docs/communicate/alerts/channels#managing-alert-channels) to notify you when a check has degraded. | ||
| <Info>`degraded` using `@checkly/playwright-helpers` states are currently only available for [MultiStep Checks](/detect/synthetic-monitoring/multistep-checks/overview) and [Browser Checks](/detect/synthetic-monitoring/browser-checks/overview).</Info> |
Contributor
There was a problem hiding this comment.
Suggested change
| <Info>`degraded` using `@checkly/playwright-helpers` states are currently only available for [MultiStep Checks](/detect/synthetic-monitoring/multistep-checks/overview) and [Browser Checks](/detect/synthetic-monitoring/browser-checks/overview).</Info> | |
| <Info>`degraded` using `@checkly/playwright-helpers` states are currently only available for [Multistep Checks](/detect/synthetic-monitoring/multistep-checks/overview) and [Browser Checks](/detect/synthetic-monitoring/browser-checks/overview).</Info> |
| In this case if the response has a 200 status code but the API response time is more than 200 seconds, the status of this check will be degraded and the slow api response time will be included as a failed step. If the response came back as a non-200 status (indicating an error) then the check would be ‘failed,’ whether or not `markCheckAsDegraded` was called. You can [configure alert channels](https://www.checklyhq.com/docs/communicate/alerts/channels#managing-alert-channels) to notify you when a check has degraded. | ||
| <Info>`degraded` using `@checkly/playwright-helpers` states are currently only available for [MultiStep Checks](/detect/synthetic-monitoring/multistep-checks/overview) and [Browser Checks](/detect/synthetic-monitoring/browser-checks/overview).</Info> | ||
|
|
||
| In this case if the response has a `200` status code but the API response time is more than 200 seconds, the status of this check will be degraded and the slow api response time will be included as a failed step. If the response came back as a non-200 status (indicating an error) then the check would be 'failed,' whether or not `markCheckAsDegraded` was called. You can [configure alert channels](https://www.checklyhq.com/docs/communicate/alerts/channels#managing-alert-channels) to notify you when a check has degraded. |
Contributor
There was a problem hiding this comment.
Suggested change
| In this case if the response has a `200` status code but the API response time is more than 200 seconds, the status of this check will be degraded and the slow api response time will be included as a failed step. If the response came back as a non-200 status (indicating an error) then the check would be 'failed,' whether or not `markCheckAsDegraded` was called. You can [configure alert channels](https://www.checklyhq.com/docs/communicate/alerts/channels#managing-alert-channels) to notify you when a check has degraded. | |
| In this case if the response has a `200` status code but the API response time is more than 200 seconds, the status of this check will be degraded and the slow API response time will be included as a failed step. If the response came back as a non-200 status (indicating an error) then the check would be 'failed,' whether or not `markCheckAsDegraded` was called. You can [configure alert channels](https://www.checklyhq.com/docs/communicate/alerts/channels#managing-alert-channels) to notify you when a check has degraded. |
|
|
||
| Note that codegen will make a ‘best effort’ at emulating your actions and writing ‘best practice’ code, so you should always review it before deploying. | ||
|
|
||
| ### Step 5: Add Assertions to your tests |
Contributor
There was a problem hiding this comment.
Suggested change
| ### Step 3: Add Assertions to your tests |
It seems the steps are not numbered correctly?
|
|
||
| <YoutubeEmbed id="8NIm1QCUXE0" title='How to Run Playwright Test in "Parallel," "Serial," or "Default" Mode' /> | ||
|
|
||
| Over on [the Checkly YouTube channel](https://www.youtube.com/checklyhq), Stefan gets hands-on with Playwright test Parallelism and execution modes: |
Contributor
There was a problem hiding this comment.
Is there a reason to move the Youtube embed above this line?
We need to remove the : or move the embed back below this line 🤔
Suggested change
| Over on [the Checkly YouTube channel](https://www.youtube.com/checklyhq), Stefan gets hands-on with Playwright test Parallelism and execution modes: | |
| Over on [the Checkly YouTube channel](https://www.youtube.com/checklyhq), Stefan gets hands-on with Playwright test Parallelism and execution modes. |
|
|
||
| ### Waiting on navigations and network conditions in Playwright | ||
|
|
||
| When you can't wait for an element to appear on a page and want to explicitly wait for the network use the following. |
Contributor
There was a problem hiding this comment.
Suggested change
| When you can't wait for an element to appear on a page and want to explicitly wait for the network use the following. | |
| When you can't wait for an element to appear on a page and want to explicitly wait for the network, use the following: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Affected Components
Notes for the Reviewer
I realize this PR is rather heavy because of slop removals and typo corrections. Apologies. :/
The primary goal of this PR is to reduce the amount of halizunations, improve
/learnand test if clear CTAs can increase CTR and sign-up rate.❗ It also fixes some fake news about the PCS max duration.
A new
<SignUpCta>componentThe
/learnsection now includes multiple CTAs to nudge people to sign up. We'll set up a GA to evaluate if this makes a difference. :)