docs: adds screen.logToTestingPlaygroundURL method (#715)

* docs: add screen.logTestingPlaygroundURL

* fix grammar

Author: tometo-dev

docs/dom-testing-library/api-queries.mdx

@@ -109,6 +109,26 @@ 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 a 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**
@@ -169,7 +189,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'
 
@@ -179,7 +198,6 @@ const inputNode = screen.getByLabelText('Username')
   </TabItem>
   <TabItem value="react">
 
-
 ```jsx
 import { render, screen } from '@testing-library/react'
 
@@ -191,15 +209,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`.
@@ -267,7 +283,6 @@ matches the given [`TextMatch`](#textmatch).
 label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
 <TabItem value="native">
 
-
 ```js
 import { screen } from '@testing-library/dom'
 
@@ -277,7 +292,6 @@ const inputNode = screen.getByPlaceholderText('Username')
   </TabItem>
   <TabItem value="react">
 
-
 ```jsx
 import { render, screen } from '@testing-library/react'
 
@@ -288,15 +302,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
@@ -330,7 +342,6 @@ matching the given [`TextMatch`](#textmatch).
 label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
 <TabItem value="native">
 
-
 ```js
 import { screen } from '@testing-library/dom'
 
@@ -340,7 +351,6 @@ const aboutAnchorNode = screen.getByText(/about/i)
   </TabItem>
   <TabItem value="react">
 
-
 ```jsx
 import { render, screen } from '@testing-library/react'
 
@@ -351,15 +361,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`:
 
@@ -412,7 +420,6 @@ as it's deprecated).
 label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
 <TabItem value="native">
 
-
 ```js
 import { screen } from '@testing-library/dom'
 
@@ -422,7 +429,6 @@ const incrediblesPosterImg = screen.getByAltText(/incredibles.*? poster/i)
   </TabItem>
   <TabItem value="react">
 
-
 ```jsx
 import { render, screen } from '@testing-library/react'
 
@@ -433,15 +439,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,
@@ -473,7 +477,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'
 
@@ -484,7 +487,6 @@ const closeElement = screen.getByTitle('Close')
   </TabItem>
   <TabItem value="react">
 
-
 ```jsx
 import { render, screen } from '@testing-library/react'
 
@@ -496,7 +498,6 @@ const closeElement = screen.getByTitle('Close')
   </TabItem>
   <TabItem value="cypress">
 
-
 ```js
 cy.findByTitle('Delete').should('exist')
 cy.findByTitle('Close').should('exist')
@@ -505,7 +506,6 @@ cy.findByTitle('Close').should('exist')
   </TabItem>
   </Tabs>
 
-
 ### `ByDisplayValue`
 
 > getByDisplayValue, queryByDisplayValue, getAllByDisplayValue,
@@ -538,7 +538,6 @@ document.getElementById('lastName').value = 'Norris'
 label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
 <TabItem value="native">
 
-
 ```js
 import { screen } from '@testing-library/dom'
 
@@ -548,7 +547,6 @@ const lastNameInput = screen.getByDisplayValue('Norris')
   </TabItem>
   <TabItem value="react">
 
-
 ```jsx
 import { render, screen } from '@testing-library/react'
 
@@ -559,15 +557,13 @@ const lastNameInput = screen.getByDisplayValue('Norris')
   </TabItem>
   <TabItem value="cypress">
 
-
 ```js
 cy.findByDisplayValue('Norris').should('exist')
 ```
 
   </TabItem>
   </Tabs>
 
-
 #### `textarea`
 
 ```html
@@ -582,7 +578,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'
 
@@ -592,7 +587,6 @@ const messageTextArea = screen.getByDisplayValue('Hello World')
   </TabItem>
   <TabItem value="react">
 
-
 ```jsx
 import { render, screen } from '@testing-library/react'
 
@@ -603,15 +597,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>`
@@ -630,7 +622,6 @@ matches the given [`TextMatch`](#textmatch).
 label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
 <TabItem value="native">
 
-
 ```js
 import { screen } from '@testing-library/dom'
 
@@ -640,7 +631,6 @@ const selectElement = screen.getByDisplayValue('Alaska')
   </TabItem>
   <TabItem value="react">
 
-
 ```jsx
 import { render, screen } from '@testing-library/react'
 
@@ -651,15 +641,13 @@ const selectElement = screen.getByDisplayValue('Alaska')
   </TabItem>
   <TabItem value="cypress">
 
-
 ```js
 cy.findByDisplayValue('Alaska').should('exist')
 ```
 
   </TabItem>
   </Tabs>
 
-
 ### `ByRole`
 
 > getByRole, queryByRole, getAllByRole, queryAllByRole, findByRole,
@@ -850,7 +838,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'
 
@@ -860,7 +847,6 @@ const dialogContainer = screen.getByRole('dialog')
   </TabItem>
   <TabItem value="react">
 
-
 ```jsx
 import { render, screen } from '@testing-library/react'
 
@@ -871,15 +857,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
@@ -971,7 +955,6 @@ also accepts a [`TextMatch`](#textmatch)).
 label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
 <TabItem value="native">
 
-
 ```js
 import { screen } from '@testing-library/dom'
 
@@ -981,7 +964,6 @@ const element = screen.getByTestId('custom-element')
   </TabItem>
   <TabItem value="react">
 
-
 ```jsx
 import { render, screen } from '@testing-library/react'
 
@@ -992,15 +974,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