Skip to content

docs: adds screen.logToTestingPlaygroundURL method #715

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 17, 2020
Merged

docs: adds screen.logToTestingPlaygroundURL method #715

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b06affd
docs: add screen.logTestingPlaygroundURL
tometo-dev Dec 16, 2020
23c16f9
fix grammar
tometo-dev Dec 17, 2020
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
61 changes: 21 additions & 40 deletions docs/dom-testing-library/api-queries.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,27 @@ screen.debug(screen.getByText('test'))
screen.debug(screen.getAllByText('multi-test'))
```

### `screen.logTestingPlaygroundURL`

For debugging using [testing-playground](https://testing-playground.com), screen
exposes this convenient method which logs an URL that can be opened in a
browser.

```javascript
import { screen } from '@testing-library/dom'

document.body.innerHTML = `
<button>test</button>
<span>multi-test</span>
<div>multi-test</div>
`

// log entire document to testing-playground
screen.logTestingPlaygroundURL()
// log a single element
screen.logTestingPlaygroundURL(screen.getByText('test'))
```

## Queries

> **Note**
Expand Down Expand Up @@ -169,7 +190,6 @@ The example below will find the input node for the following DOM structures:
label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
<TabItem value="native">


```js
import { screen } from '@testing-library/dom'

Expand All @@ -179,7 +199,6 @@ const inputNode = screen.getByLabelText('Username')
</TabItem>
<TabItem value="react">


```jsx
import { render, screen } from '@testing-library/react'

Expand All @@ -191,15 +210,13 @@ const inputNode = screen.getByLabelText('username')
</TabItem>
<TabItem value="cypress">


```js
cy.findByLabelText('username').should('exist')
```

</TabItem>
</Tabs>


It will NOT find the input node for label text broken up by elements. You can
use `getByRole('textbox', { name: 'Username' })` instead which is robust against
switching to `aria-label` or `aria-labelledby`.
Expand Down Expand Up @@ -267,7 +284,6 @@ matches the given [`TextMatch`](#textmatch).
label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
<TabItem value="native">


```js
import { screen } from '@testing-library/dom'

Expand All @@ -277,7 +293,6 @@ const inputNode = screen.getByPlaceholderText('Username')
</TabItem>
<TabItem value="react">


```jsx
import { render, screen } from '@testing-library/react'

Expand All @@ -288,15 +303,13 @@ const inputNode = screen.getByPlaceholderText('Username')
</TabItem>
<TabItem value="cypress">


```js
cy.findByPlaceholderText('Username').should('exist')
```

</TabItem>
</Tabs>


> **Note**
>
> A placeholder is not a good substitute for a label so you should generally use
Expand Down Expand Up @@ -330,7 +343,6 @@ matching the given [`TextMatch`](#textmatch).
label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
<TabItem value="native">


```js
import { screen } from '@testing-library/dom'

Expand All @@ -340,7 +352,6 @@ const aboutAnchorNode = screen.getByText(/about/i)
</TabItem>
<TabItem value="react">


```jsx
import { render, screen } from '@testing-library/react'

Expand All @@ -351,15 +362,13 @@ const aboutAnchorNode = screen.getByText(/about/i)
</TabItem>
<TabItem value="cypress">


```js
cy.findByText(/about/i).should('exist')
```

</TabItem>
</Tabs>


It also works with `input`s whose `type` attribute is either `submit` or
`button`:

Expand Down Expand Up @@ -412,7 +421,6 @@ as it's deprecated).
label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
<TabItem value="native">


```js
import { screen } from '@testing-library/dom'

Expand All @@ -422,7 +430,6 @@ const incrediblesPosterImg = screen.getByAltText(/incredibles.*? poster/i)
</TabItem>
<TabItem value="react">


```jsx
import { render, screen } from '@testing-library/react'

Expand All @@ -433,15 +440,13 @@ const incrediblesPosterImg = screen.getByAltText(/incredibles.*? poster/i)
</TabItem>
<TabItem value="cypress">


```js
cy.findByAltText(/incredibles.*? poster/i).should('exist')
```

</TabItem>
</Tabs>


### `ByTitle`

> getByTitle, queryByTitle, getAllByTitle, queryAllByTitle, findByTitle,
Expand Down Expand Up @@ -473,7 +478,6 @@ Will also find a `title` element within an SVG.
label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
<TabItem value="native">


```js
import { screen } from '@testing-library/dom'

Expand All @@ -484,7 +488,6 @@ const closeElement = screen.getByTitle('Close')
</TabItem>
<TabItem value="react">


```jsx
import { render, screen } from '@testing-library/react'

Expand All @@ -496,7 +499,6 @@ const closeElement = screen.getByTitle('Close')
</TabItem>
<TabItem value="cypress">


```js
cy.findByTitle('Delete').should('exist')
cy.findByTitle('Close').should('exist')
Expand All @@ -505,7 +507,6 @@ cy.findByTitle('Close').should('exist')
</TabItem>
</Tabs>


### `ByDisplayValue`

> getByDisplayValue, queryByDisplayValue, getAllByDisplayValue,
Expand Down Expand Up @@ -538,7 +539,6 @@ document.getElementById('lastName').value = 'Norris'
label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
<TabItem value="native">


```js
import { screen } from '@testing-library/dom'

Expand All @@ -548,7 +548,6 @@ const lastNameInput = screen.getByDisplayValue('Norris')
</TabItem>
<TabItem value="react">


```jsx
import { render, screen } from '@testing-library/react'

Expand All @@ -559,15 +558,13 @@ const lastNameInput = screen.getByDisplayValue('Norris')
</TabItem>
<TabItem value="cypress">


```js
cy.findByDisplayValue('Norris').should('exist')
```

</TabItem>
</Tabs>


#### `textarea`

```html
Expand All @@ -582,7 +579,6 @@ document.getElementById('messageTextArea').value = 'Hello World'
label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
<TabItem value="native">


```js
import { screen } from '@testing-library/dom'

Expand All @@ -592,7 +588,6 @@ const messageTextArea = screen.getByDisplayValue('Hello World')
</TabItem>
<TabItem value="react">


```jsx
import { render, screen } from '@testing-library/react'

Expand All @@ -603,15 +598,13 @@ const messageTextArea = screen.getByDisplayValue('Hello World')
</TabItem>
<TabItem value="cypress">


```js
cy.findByDisplayValue('Hello World').should('exist')
```

</TabItem>
</Tabs>


#### `select`

In case of `select`, this will search for a `<select>` whose selected `<option>`
Expand All @@ -630,7 +623,6 @@ matches the given [`TextMatch`](#textmatch).
label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
<TabItem value="native">


```js
import { screen } from '@testing-library/dom'

Expand All @@ -640,7 +632,6 @@ const selectElement = screen.getByDisplayValue('Alaska')
</TabItem>
<TabItem value="react">


```jsx
import { render, screen } from '@testing-library/react'

Expand All @@ -651,15 +642,13 @@ const selectElement = screen.getByDisplayValue('Alaska')
</TabItem>
<TabItem value="cypress">


```js
cy.findByDisplayValue('Alaska').should('exist')
```

</TabItem>
</Tabs>


### `ByRole`

> getByRole, queryByRole, getAllByRole, queryAllByRole, findByRole,
Expand Down Expand Up @@ -850,7 +839,6 @@ and which elements can have this state see
label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
<TabItem value="native">


```js
import { screen } from '@testing-library/dom'

Expand All @@ -860,7 +848,6 @@ const dialogContainer = screen.getByRole('dialog')
</TabItem>
<TabItem value="react">


```jsx
import { render, screen } from '@testing-library/react'

Expand All @@ -871,15 +858,13 @@ const dialogContainer = screen.getByRole('dialog')
</TabItem>
<TabItem value="cypress">


```js
cy.findByRole('dialog').should('exist')
```

</TabItem>
</Tabs>


#### `queryFallbacks`

By default, it's assumed that the first role of each element is supported, so
Expand Down Expand Up @@ -971,7 +956,6 @@ also accepts a [`TextMatch`](#textmatch)).
label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
<TabItem value="native">


```js
import { screen } from '@testing-library/dom'

Expand All @@ -981,7 +965,6 @@ const element = screen.getByTestId('custom-element')
</TabItem>
<TabItem value="react">


```jsx
import { render, screen } from '@testing-library/react'

Expand All @@ -992,15 +975,13 @@ const element = screen.getByTestId('custom-element')
</TabItem>
<TabItem value="cypress">


```js
cy.findByTestId('custom-element').should('exist')
```

</TabItem>
</Tabs>


> In the spirit of [the guiding principles](guiding-principles.mdx), it is
> recommended to use this only after the other queries don't work for your use
> case. Using data-testid attributes do not resemble how your software is used
Expand Down