diff --git a/docs/pages/teamshares/recipes/cypress.md b/docs/pages/teamshares/recipes/cypress.md
index b9a9e20c..e0e429c8 100644
--- a/docs/pages/teamshares/recipes/cypress.md
+++ b/docs/pages/teamshares/recipes/cypress.md
@@ -5,45 +5,18 @@ meta:
# Shoelace & Cypress
-> Tips for testing Shoelace components with Cypress
+> Testing Shoelace components with Cypress
-## TL;DR
+## Cypress Commands Cheat Sheet
-For the most part, you can use Shoelace components the same way you'd use their HTML equivalents, since they emit many of the same events (`click`, `focus`, etc). But like all web components, Shoelace components encapsulate their internal parts within the [shadow dom](https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/).
-
-This means that the internals of Shoelace components aren't available directly on the DOM (via `document.querySelector`, etc.), but have to be queried via the [`Element.shadowRoot` property](https://developer.mozilla.org/en-US/docs/Web/API/Element/shadowRoot).
-
-Cypress provides a convenience method for accessing the shadow DOM via the [`.shadow()` method.](https://docs.cypress.io/api/commands/shadow).
-
-For example, to find the anchor tag within a link button:
-
-```js
-cy.get('sl-button[href]').shadow().find('a');
-```
-
-To click on a specific button:
-
-```js
-cy.get('[data-test-id="some_sl_button"]').click();
-```
-
-Also see below for more on testing Shoelace design system components with Cypress:
-
-- [Cypress Commands Cheat Sheet](#cypress-commands-cheat-sheet)
-- [Generic Cypress Commands](#generic-commands)
-- [Custom Cypress Commands](#custom-commands)
-- [Form Components with Cypress Documentation](#form-components-with-cypress-documentation)
-
-### Cypress Commands Cheat Sheet
-
-This is a quick reference guide to common test actions for form components.
+A quick reference guide to common test actions for form components.
| Component | Test action | Cypress command |
| --------------------- | --------------------------------- | ---------------------------------------------------------------------- |
| **Checkbox** | check | [`cy.slCheckboxCheck()`](#cy_slcheckboxcheck) |
| | uncheck | [`cy.slCheckboxUncheck()`](#cy_slcheckboxuncheck) |
-| | is checked? | [`cy.get().should("have.prop", "checked", true)`](#shouldhave_prop) |
-| | is not checked? | [`cy.get().should("have.prop", "checked", false)`](#shouldhave_prop) |
+| | checked? | [`cy.get().should("have.prop", "checked", true)`](#shouldhave_prop) |
+| | not checked? | [`cy.get().should("have.prop", "checked", false)`](#shouldhave_prop) |
| **Checkbox Group** | value? | [`cy.slCheckboxGroupValue()`](#cy_slcheckboxgroupvalue) |
| | not value? | [`cy.get().should("not.have.value", "value")`](#shouldhave_value) |
| **Input** | focus | [`cy.slFocus()`](#cy_slfocus) |
@@ -63,7 +36,7 @@ Also see below for more on testing Shoelace design system components with Cypres
## Generic Commands
-The following are generic Cypress commands that can be used for testing Shoelace design system components:
+Generic Cypress commands that can be used for testing Shoelace design system components:
### `click()`
@@ -73,10 +46,6 @@ Use to **click** an element like [sl-button](/components/button) or radio item i
cy.get(`[data-test-id="item-test-1"]`).click();
```
-:::tip
-What other elements does this work for?
-:::
-
### `should('have.prop')`
Use on boolean elements like [sl-checkbox](/components/checkbox/#with-cypress) and [sl-switch](/components/switch/#with-cypress) to verify whether the input is checked:
@@ -106,13 +75,9 @@ Can also use to verify that an input does **NOT** have a certain value:
cy.get(`[data-test-id="checkbox-group-test"]`).should('not.have.value', 'option-1');
```
-:::tip
-Does this also work for Checkbox Group? Select?
-:::
-
## Custom Commands
-The following are custom Cypress commands created for testing Shoelace design system components:
+Custom Cypress commands created for testing Shoelace design system components:
### `cy.slCheckboxCheck()`
@@ -162,10 +127,6 @@ Use to **focus** on elements like [sl-input](/components/input/#with-cypress) an
cy.slFocus(`[data-test-id="input-test"]`);
```
-:::tip
-What other elements does this work for?
-:::
-
### `cy.slClear()`
Use to **clear** [sl-input](/components/input/#with-cypress):
@@ -174,10 +135,6 @@ Use to **clear** [sl-input](/components/input/#with-cypress):
cy.slClear(`[data-test-id="input-test"]`);
```
-:::tip
-What other elements does this work for?
-:::
-
### `cy.slTextAreaClear()`
Use to **clear** [sl-textarea](/components/textarea/#with-cypress):
@@ -220,6 +177,28 @@ You can find additional documentation for testing specific components with Cypre
- [sl-switch](/components/switch/#testing)
- [sl-textarea](/components/textarea/#testing)
+## Writing Custom Cypress Commands
+
+For the most part, you can use Shoelace components the same way you'd use their HTML equivalents, since they emit many of the same events (`click`, `focus`, etc).
+
+But like all web components, Shoelace components encapsulate their internal parts within the [shadow dom](https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/).
+
+This means that the internals of Shoelace components aren't available directly on the DOM (via `document.querySelector`, etc.), but have to be queried via the [`Element.shadowRoot` property](https://developer.mozilla.org/en-US/docs/Web/API/Element/shadowRoot).
+
+Cypress provides a convenience method for accessing the shadow DOM via the [`.shadow()` method.](https://docs.cypress.io/api/commands/shadow).
+
+For example, to find the anchor tag within a link button:
+
+```js
+cy.get('sl-button[href]').shadow().find('a');
+```
+
+To click on a specific button:
+
+```js
+cy.get('[data-test-id="some_sl_button"]').click();
+```
+
## Questions and Feedback
Commands not working as expected? Need a specific command for testing but not seeing it here?