chore: unexperiment role selectors (#13858)

This commit is contained in:
Andrey Lushnikov 2022-05-02 10:32:50 -06:00 committed by GitHub
parent f6c55889c8
commit bd2a2873b7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 7 additions and 29 deletions

View file

@ -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"`.

View file

@ -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"`.

View file

@ -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"`.

View file

@ -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"`.

View file

@ -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".

View file

@ -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));

View file

@ -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)) {