kopia lustrzana https://github.com/shoelace-style/shoelace
Small copy updates, Cypress testing docs
Sara
rodzic
834a043fe8
commit
de86f231c8
|
|
@ -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
|
||||
|
||||
<div class="cy-table-desc">This is a quick reference guide to common test actions for form components.</div>
|
||||
<div class="cy-table-desc">A quick reference guide to common test actions for form components.</div>
|
||||
|
||||
| Component | Test action | Cypress command |
|
||||
| --------------------- | --------------------------------- | ---------------------------------------------------------------------- |
|
||||
| **Checkbox** | <span>check</span> | [`cy.slCheckboxCheck()`](#cy_slcheckboxcheck) |
|
||||
| | <span>uncheck</span> | [`cy.slCheckboxUncheck()`](#cy_slcheckboxuncheck) |
|
||||
| | <span>is checked?</span> | [`cy.get().should("have.prop", "checked", true)`](#shouldhave_prop) |
|
||||
| | <span>is not checked?</span> | [`cy.get().should("have.prop", "checked", false)`](#shouldhave_prop) |
|
||||
| | <span>checked?</span> | [`cy.get().should("have.prop", "checked", true)`](#shouldhave_prop) |
|
||||
| | <span>not checked?</span> | [`cy.get().should("have.prop", "checked", false)`](#shouldhave_prop) |
|
||||
| **Checkbox Group** | <span>value?</span> | [`cy.slCheckboxGroupValue()`](#cy_slcheckboxgroupvalue) |
|
||||
| | <span>not value?</span> | [`cy.get().should("not.have.value", "value")`](#shouldhave_value) |
|
||||
| **Input** | <span>focus</span> | [`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?
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue