chore: unexperiment role selectors (#13858)
This commit is contained in:
parent
f6c55889c8
commit
bd2a2873b7
|
|
@ -9,15 +9,13 @@ title: "Release notes"
|
||||||
|
|
||||||
### Highlights
|
### Highlights
|
||||||
|
|
||||||
- New **experimental** role selectors that allow selecting elements by their [ARIA role](https://www.w3.org/TR/wai-aria-1.2/#roles), [ARIA attributes](https://www.w3.org/TR/wai-aria-1.2/#aria-attributes) and [accessible name](https://w3c.github.io/accname/#dfn-accessible-name).
|
- New role selectors that allow selecting elements by their [ARIA role](https://www.w3.org/TR/wai-aria-1.2/#roles), [ARIA attributes](https://www.w3.org/TR/wai-aria-1.2/#aria-attributes) and [accessible name](https://w3c.github.io/accname/#dfn-accessible-name).
|
||||||
|
|
||||||
```csharp
|
```csharp
|
||||||
// Click a button with accessible name "log in"
|
// Click a button with accessible name "log in"
|
||||||
await page.ClickAsync("role=button[name='log in']")
|
await page.ClickAsync("role=button[name='log in']")
|
||||||
```
|
```
|
||||||
|
|
||||||
To use role selectors, make sure to pass `PLAYWRIGHT_EXPERIMENTAL_FEATURES=1` environment variable.
|
|
||||||
|
|
||||||
Read more in [our documentation](./selectors#role-selector).
|
Read more in [our documentation](./selectors#role-selector).
|
||||||
- New `scale` option in [`method: Page.screenshot`] for smaller sized screenshots.
|
- New `scale` option in [`method: Page.screenshot`] for smaller sized screenshots.
|
||||||
- New `caret` option in [`method: Page.screenshot`] to control text caret. Defaults to `"hide"`.
|
- New `caret` option in [`method: Page.screenshot`] to control text caret. Defaults to `"hide"`.
|
||||||
|
|
|
||||||
|
|
@ -9,15 +9,13 @@ title: "Release notes"
|
||||||
|
|
||||||
### Highlights
|
### Highlights
|
||||||
|
|
||||||
- New **experimental** role selectors that allow selecting elements by their [ARIA role](https://www.w3.org/TR/wai-aria-1.2/#roles), [ARIA attributes](https://www.w3.org/TR/wai-aria-1.2/#aria-attributes) and [accessible name](https://w3c.github.io/accname/#dfn-accessible-name).
|
- New role selectors that allow selecting elements by their [ARIA role](https://www.w3.org/TR/wai-aria-1.2/#roles), [ARIA attributes](https://www.w3.org/TR/wai-aria-1.2/#aria-attributes) and [accessible name](https://w3c.github.io/accname/#dfn-accessible-name).
|
||||||
|
|
||||||
```java
|
```java
|
||||||
// Click a button with accessible name "log in"
|
// Click a button with accessible name "log in"
|
||||||
page.click("role=button[name='log in']")
|
page.click("role=button[name='log in']")
|
||||||
```
|
```
|
||||||
|
|
||||||
To use role selectors, make sure to pass `PLAYWRIGHT_EXPERIMENTAL_FEATURES=1` environment variable.
|
|
||||||
|
|
||||||
Read more in [our documentation](./selectors#role-selector).
|
Read more in [our documentation](./selectors#role-selector).
|
||||||
- New `scale` option in [`method: Page.screenshot`] for smaller sized screenshots.
|
- New `scale` option in [`method: Page.screenshot`] for smaller sized screenshots.
|
||||||
- New `caret` option in [`method: Page.screenshot`] to control text caret. Defaults to `"hide"`.
|
- New `caret` option in [`method: Page.screenshot`] to control text caret. Defaults to `"hide"`.
|
||||||
|
|
|
||||||
|
|
@ -9,23 +9,13 @@ title: "Release notes"
|
||||||
|
|
||||||
### Highlights
|
### Highlights
|
||||||
|
|
||||||
- New **experimental** role selectors that allow selecting elements by their [ARIA role](https://www.w3.org/TR/wai-aria-1.2/#roles), [ARIA attributes](https://www.w3.org/TR/wai-aria-1.2/#aria-attributes) and [accessible name](https://w3c.github.io/accname/#dfn-accessible-name).
|
- New role selectors that allow selecting elements by their [ARIA role](https://www.w3.org/TR/wai-aria-1.2/#roles), [ARIA attributes](https://www.w3.org/TR/wai-aria-1.2/#aria-attributes) and [accessible name](https://w3c.github.io/accname/#dfn-accessible-name).
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// Click a button with accessible name "log in"
|
// Click a button with accessible name "log in"
|
||||||
await page.click('role=button[name="log in"]')
|
await page.click('role=button[name="log in"]')
|
||||||
```
|
```
|
||||||
|
|
||||||
To use role selectors, make sure to pass `PLAYWRIGHT_EXPERIMENTAL_FEATURES=1` environment variable:
|
|
||||||
|
|
||||||
```js
|
|
||||||
// playwright.config.js
|
|
||||||
process.env.PLAYWRIGHT_EXPERIMENTAL_FEATURES = '1';
|
|
||||||
module.exports = {
|
|
||||||
/* ... */
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
Read more in [our documentation](./selectors#role-selector).
|
Read more in [our documentation](./selectors#role-selector).
|
||||||
- New `scale` option in [`method: Page.screenshot`] for smaller sized screenshots.
|
- New `scale` option in [`method: Page.screenshot`] for smaller sized screenshots.
|
||||||
- New `caret` option in [`method: Page.screenshot`] to control text caret. Defaults to `"hide"`.
|
- New `caret` option in [`method: Page.screenshot`] to control text caret. Defaults to `"hide"`.
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ title: "Release notes"
|
||||||
|
|
||||||
### Highlights
|
### Highlights
|
||||||
|
|
||||||
- New **experimental** role selectors that allow selecting elements by their [ARIA role](https://www.w3.org/TR/wai-aria-1.2/#roles), [ARIA attributes](https://www.w3.org/TR/wai-aria-1.2/#aria-attributes) and [accessible name](https://w3c.github.io/accname/#dfn-accessible-name).
|
- New role selectors that allow selecting elements by their [ARIA role](https://www.w3.org/TR/wai-aria-1.2/#roles), [ARIA attributes](https://www.w3.org/TR/wai-aria-1.2/#aria-attributes) and [accessible name](https://w3c.github.io/accname/#dfn-accessible-name).
|
||||||
|
|
||||||
```python async
|
```python async
|
||||||
# Click a button with accessible name "log in"
|
# Click a button with accessible name "log in"
|
||||||
|
|
@ -21,8 +21,6 @@ title: "Release notes"
|
||||||
page.click("role=button[name='log in']")
|
page.click("role=button[name='log in']")
|
||||||
```
|
```
|
||||||
|
|
||||||
To use role selectors, make sure to pass `PLAYWRIGHT_EXPERIMENTAL_FEATURES=1` environment variable.
|
|
||||||
|
|
||||||
Read more in [our documentation](./selectors#role-selector).
|
Read more in [our documentation](./selectors#role-selector).
|
||||||
- New `scale` option in [`method: Page.screenshot`] for smaller sized screenshots.
|
- New `scale` option in [`method: Page.screenshot`] for smaller sized screenshots.
|
||||||
- New `caret` option in [`method: Page.screenshot`] to control text caret. Defaults to `"hide"`.
|
- New `caret` option in [`method: Page.screenshot`] to control text caret. Defaults to `"hide"`.
|
||||||
|
|
|
||||||
|
|
@ -948,10 +948,6 @@ Vue selectors, as well as [Vue DevTools](https://chrome.google.com/webstore/deta
|
||||||
|
|
||||||
## Role selector
|
## Role selector
|
||||||
|
|
||||||
:::note
|
|
||||||
Role selector is experimental, only available when running with `PLAYWRIGHT_EXPERIMENTAL_FEATURES=1` enviroment variable.
|
|
||||||
:::
|
|
||||||
|
|
||||||
Role selector allows selecting elements by their [ARIA role](https://www.w3.org/TR/wai-aria-1.2/#roles), [ARIA attributes](https://www.w3.org/TR/wai-aria-1.2/#aria-attributes) and [accessible name](https://w3c.github.io/accname/#dfn-accessible-name). Note that role selector **does not replace** accessibility audits and conformance tests, but rather gives early feedback about the ARIA guidelines.
|
Role selector allows selecting elements by their [ARIA role](https://www.w3.org/TR/wai-aria-1.2/#roles), [ARIA attributes](https://www.w3.org/TR/wai-aria-1.2/#aria-attributes) and [accessible name](https://w3c.github.io/accname/#dfn-accessible-name). Note that role selector **does not replace** accessibility audits and conformance tests, but rather gives early feedback about the ARIA guidelines.
|
||||||
|
|
||||||
The syntax is very similar to [CSS attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors). For example, `role=button[name="Click me"][pressed]` selects a pressed button that has accessible name "Click me".
|
The syntax is very similar to [CSS attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors). For example, `role=button[name="Click me"][pressed]` selects a pressed button that has accessible name "Click me".
|
||||||
|
|
|
||||||
|
|
@ -86,8 +86,7 @@ export class InjectedScript {
|
||||||
this._engines.set('xpath:light', XPathEngine);
|
this._engines.set('xpath:light', XPathEngine);
|
||||||
this._engines.set('_react', ReactEngine);
|
this._engines.set('_react', ReactEngine);
|
||||||
this._engines.set('_vue', VueEngine);
|
this._engines.set('_vue', VueEngine);
|
||||||
if (experimentalFeaturesEnabled)
|
this._engines.set('role', RoleEngine);
|
||||||
this._engines.set('role', RoleEngine);
|
|
||||||
this._engines.set('text', this._createTextEngine(true));
|
this._engines.set('text', this._createTextEngine(true));
|
||||||
this._engines.set('text:light', this._createTextEngine(false));
|
this._engines.set('text:light', this._createTextEngine(false));
|
||||||
this._engines.set('id', this._createAttributeEngine('id', true));
|
this._engines.set('id', this._createAttributeEngine('id', true));
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@ import type * as js from './javascript';
|
||||||
import type * as types from './types';
|
import type * as types from './types';
|
||||||
import type { ParsedSelector } from './isomorphic/selectorParser';
|
import type { ParsedSelector } from './isomorphic/selectorParser';
|
||||||
import { allEngineNames, InvalidSelectorError, parseSelector, stringifySelector } from './isomorphic/selectorParser';
|
import { allEngineNames, InvalidSelectorError, parseSelector, stringifySelector } from './isomorphic/selectorParser';
|
||||||
import { createGuid, experimentalFeaturesEnabled } from '../utils';
|
import { createGuid } from '../utils';
|
||||||
|
|
||||||
export type SelectorInfo = {
|
export type SelectorInfo = {
|
||||||
parsed: ParsedSelector,
|
parsed: ParsedSelector,
|
||||||
|
|
@ -134,8 +134,7 @@ export class Selectors {
|
||||||
}
|
}
|
||||||
|
|
||||||
parseSelector(selector: string | ParsedSelector, strict: boolean): SelectorInfo {
|
parseSelector(selector: string | ParsedSelector, strict: boolean): SelectorInfo {
|
||||||
if (experimentalFeaturesEnabled())
|
this._builtinEngines.add('role');
|
||||||
this._builtinEngines.add('role');
|
|
||||||
const parsed = typeof selector === 'string' ? parseSelector(selector) : selector;
|
const parsed = typeof selector === 'string' ? parseSelector(selector) : selector;
|
||||||
let needsMainWorld = false;
|
let needsMainWorld = false;
|
||||||
for (const name of allEngineNames(parsed)) {
|
for (const name of allEngineNames(parsed)) {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue