feat(locators): remove layout locators (#14129)

This commit is contained in:
Dmitry Gozman 2022-05-12 18:50:19 +01:00 committed by GitHub
parent 83d82fa466
commit 0e2855348c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 5 additions and 570 deletions

View file

@ -897,49 +897,9 @@ For example, `article` that has `text=Playwright` matches `<article><div>Playwri
Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
## locator-option-left-of
- `leftOf` <[Locator]>
Matches elements that are to the left of any element matching the inner locator, at any vertical position. Inner locator is queried against the same root as the outer one. More details in [layout selectors](../selectors.md#selecting-elements-based-on-layout) guide.
Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
## locator-option-right-of
- `rightOf` <[Locator]>
Matches elements that are to the right of any element matching the inner locator, at any vertical position. Inner locator is queried against the same root as the outer one. More details in [layout selectors](../selectors.md#selecting-elements-based-on-layout) guide.
Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
## locator-option-above
- `above` <[Locator]>
Matches elements that are above any of the elements matching the inner locator, at any horizontal position. Inner locator is queried against the same root as the outer one. More details in [layout selectors](../selectors.md#selecting-elements-based-on-layout) guide.
Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
## locator-option-below
- `below` <[Locator]>
Matches elements that are below any of the elements matching the inner locator, at any horizontal position. Inner locator is queried against the same root as the outer one. More details in [layout selectors](../selectors.md#selecting-elements-based-on-layout) guide.
Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
## locator-option-near
- `near` <[Locator]>
Matches elements that are near (<= 50 css pixels) any of the elements matching the inner locator. Inner locator is queried against the same root as the outer one. More details in [layout selectors](../selectors.md#selecting-elements-based-on-layout) guide.
Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
## locator-options-list
- %%-locator-option-has-text-%%
- %%-locator-option-has-%%
- %%-locator-option-left-of-%%
- %%-locator-option-right-of-%%
- %%-locator-option-above-%%
- %%-locator-option-below-%%
- %%-locator-option-near-%%
## screenshot-option-animations
- `animations` <[ScreenshotAnimations]<"disabled"|"allow">>

View file

@ -29,11 +29,6 @@ import { escapeWithQuotes } from '../utils/isomorphic/stringUtils';
export type LocatorOptions = {
hasText?: string | RegExp;
has?: Locator;
leftOf?: Locator;
rightOf?: Locator;
above?: Locator;
below?: Locator;
near?: Locator;
};
export class Locator implements api.Locator {
@ -52,14 +47,11 @@ export class Locator implements api.Locator {
this._selector += ` >> :scope:has-text(${escapeWithQuotes(text, '"')})`;
}
for (const inner of ['has', 'leftOf', 'rightOf', 'above', 'below', 'near'] as const) {
const locator = options?.[inner];
if (!locator)
continue;
if (options?.has) {
const locator = options.has;
if (locator._frame !== frame)
throw new Error(`Inner "${inner}" locator must belong to the same frame.`);
const engineName = inner === 'leftOf' ? 'left-of' : (inner === 'rightOf' ? 'right-of' : inner);
this._selector += ` >> ${engineName}=` + JSON.stringify(locator._selector);
throw new Error(`Inner "has" locator must belong to the same frame.`);
this._selector += ` >> has=` + JSON.stringify(locator._selector);
}
}

View file

@ -104,11 +104,6 @@ export class InjectedScript {
this._engines.set('visible', this._createVisibleEngine());
this._engines.set('control', this._createControlEngine());
this._engines.set('has', this._createHasEngine());
this._engines.set('left-of', { queryAll: () => [] });
this._engines.set('right-of', { queryAll: () => [] });
this._engines.set('above', { queryAll: () => [] });
this._engines.set('below', { queryAll: () => [] });
this._engines.set('near', { queryAll: () => [] });
for (const { name, engine } of customEngines)
this._engines.set(name, engine);

View file

@ -46,7 +46,6 @@ export class Selectors {
'data-test-id', 'data-test-id:light',
'data-test', 'data-test:light',
'nth', 'visible', 'control', 'has',
'left-of', 'right-of', 'above', 'below', 'near',
'role',
]);
this._builtinEnginesInMainWorld = new Set([

View file

@ -2621,24 +2621,6 @@ export interface Page {
* @param options
*/
locator(selector: string, options?: {
/**
* Matches elements that are above any of the elements matching the inner locator, at any horizontal position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
above?: Locator;
/**
* Matches elements that are below any of the elements matching the inner locator, at any horizontal position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
below?: Locator;
/**
* Matches elements containing an element that matches an inner locator. Inner locator is queried against the outer one.
* For example, `article` that has `text=Playwright` matches `<article><div>Playwright</div></article>`.
@ -2653,33 +2635,6 @@ export interface Page {
* `<article><div>Playwright</div></article>`.
*/
hasText?: string|RegExp;
/**
* Matches elements that are to the left of any element matching the inner locator, at any vertical position. Inner locator
* is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
leftOf?: Locator;
/**
* Matches elements that are near (<= 50 css pixels) any of the elements matching the inner locator. Inner locator is
* queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
near?: Locator;
/**
* Matches elements that are to the right of any element matching the inner locator, at any vertical position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
rightOf?: Locator;
}): Locator;
/**
@ -5492,24 +5447,6 @@ export interface Frame {
* @param options
*/
locator(selector: string, options?: {
/**
* Matches elements that are above any of the elements matching the inner locator, at any horizontal position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
above?: Locator;
/**
* Matches elements that are below any of the elements matching the inner locator, at any horizontal position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
below?: Locator;
/**
* Matches elements containing an element that matches an inner locator. Inner locator is queried against the outer one.
* For example, `article` that has `text=Playwright` matches `<article><div>Playwright</div></article>`.
@ -5524,33 +5461,6 @@ export interface Frame {
* `<article><div>Playwright</div></article>`.
*/
hasText?: string|RegExp;
/**
* Matches elements that are to the left of any element matching the inner locator, at any vertical position. Inner locator
* is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
leftOf?: Locator;
/**
* Matches elements that are near (<= 50 css pixels) any of the elements matching the inner locator. Inner locator is
* queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
near?: Locator;
/**
* Matches elements that are to the right of any element matching the inner locator, at any vertical position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
rightOf?: Locator;
}): Locator;
/**
@ -9272,24 +9182,6 @@ export interface Locator {
* @param options
*/
filter(options?: {
/**
* Matches elements that are above any of the elements matching the inner locator, at any horizontal position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
above?: Locator;
/**
* Matches elements that are below any of the elements matching the inner locator, at any horizontal position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
below?: Locator;
/**
* Matches elements containing an element that matches an inner locator. Inner locator is queried against the outer one.
* For example, `article` that has `text=Playwright` matches `<article><div>Playwright</div></article>`.
@ -9304,33 +9196,6 @@ export interface Locator {
* `<article><div>Playwright</div></article>`.
*/
hasText?: string|RegExp;
/**
* Matches elements that are to the left of any element matching the inner locator, at any vertical position. Inner locator
* is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
leftOf?: Locator;
/**
* Matches elements that are near (<= 50 css pixels) any of the elements matching the inner locator. Inner locator is
* queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
near?: Locator;
/**
* Matches elements that are to the right of any element matching the inner locator, at any vertical position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
rightOf?: Locator;
}): Locator;
/**
@ -9578,24 +9443,6 @@ export interface Locator {
* @param options
*/
locator(selector: string, options?: {
/**
* Matches elements that are above any of the elements matching the inner locator, at any horizontal position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
above?: Locator;
/**
* Matches elements that are below any of the elements matching the inner locator, at any horizontal position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
below?: Locator;
/**
* Matches elements containing an element that matches an inner locator. Inner locator is queried against the outer one.
* For example, `article` that has `text=Playwright` matches `<article><div>Playwright</div></article>`.
@ -9610,33 +9457,6 @@ export interface Locator {
* `<article><div>Playwright</div></article>`.
*/
hasText?: string|RegExp;
/**
* Matches elements that are to the left of any element matching the inner locator, at any vertical position. Inner locator
* is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
leftOf?: Locator;
/**
* Matches elements that are near (<= 50 css pixels) any of the elements matching the inner locator. Inner locator is
* queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
near?: Locator;
/**
* Matches elements that are to the right of any element matching the inner locator, at any vertical position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
rightOf?: Locator;
}): Locator;
/**
@ -14108,24 +13928,6 @@ export interface FrameLocator {
* @param options
*/
locator(selector: string, options?: {
/**
* Matches elements that are above any of the elements matching the inner locator, at any horizontal position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
above?: Locator;
/**
* Matches elements that are below any of the elements matching the inner locator, at any horizontal position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
below?: Locator;
/**
* Matches elements containing an element that matches an inner locator. Inner locator is queried against the outer one.
* For example, `article` that has `text=Playwright` matches `<article><div>Playwright</div></article>`.
@ -14140,33 +13942,6 @@ export interface FrameLocator {
* `<article><div>Playwright</div></article>`.
*/
hasText?: string|RegExp;
/**
* Matches elements that are to the left of any element matching the inner locator, at any vertical position. Inner locator
* is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
leftOf?: Locator;
/**
* Matches elements that are near (<= 50 css pixels) any of the elements matching the inner locator. Inner locator is
* queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
near?: Locator;
/**
* Matches elements that are to the right of any element matching the inner locator, at any vertical position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
rightOf?: Locator;
}): Locator;
/**

View file

@ -2623,24 +2623,6 @@ export interface Page {
* @param options
*/
locator(selector: string, options?: {
/**
* Matches elements that are above any of the elements matching the inner locator, at any horizontal position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
above?: Locator;
/**
* Matches elements that are below any of the elements matching the inner locator, at any horizontal position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
below?: Locator;
/**
* Matches elements containing an element that matches an inner locator. Inner locator is queried against the outer one.
* For example, `article` that has `text=Playwright` matches `<article><div>Playwright</div></article>`.
@ -2655,33 +2637,6 @@ export interface Page {
* `<article><div>Playwright</div></article>`.
*/
hasText?: string|RegExp;
/**
* Matches elements that are to the left of any element matching the inner locator, at any vertical position. Inner locator
* is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
leftOf?: Locator;
/**
* Matches elements that are near (<= 50 css pixels) any of the elements matching the inner locator. Inner locator is
* queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
near?: Locator;
/**
* Matches elements that are to the right of any element matching the inner locator, at any vertical position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
rightOf?: Locator;
}): Locator;
/**
@ -5494,24 +5449,6 @@ export interface Frame {
* @param options
*/
locator(selector: string, options?: {
/**
* Matches elements that are above any of the elements matching the inner locator, at any horizontal position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
above?: Locator;
/**
* Matches elements that are below any of the elements matching the inner locator, at any horizontal position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
below?: Locator;
/**
* Matches elements containing an element that matches an inner locator. Inner locator is queried against the outer one.
* For example, `article` that has `text=Playwright` matches `<article><div>Playwright</div></article>`.
@ -5526,33 +5463,6 @@ export interface Frame {
* `<article><div>Playwright</div></article>`.
*/
hasText?: string|RegExp;
/**
* Matches elements that are to the left of any element matching the inner locator, at any vertical position. Inner locator
* is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
leftOf?: Locator;
/**
* Matches elements that are near (<= 50 css pixels) any of the elements matching the inner locator. Inner locator is
* queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
near?: Locator;
/**
* Matches elements that are to the right of any element matching the inner locator, at any vertical position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
rightOf?: Locator;
}): Locator;
/**
@ -9274,24 +9184,6 @@ export interface Locator {
* @param options
*/
filter(options?: {
/**
* Matches elements that are above any of the elements matching the inner locator, at any horizontal position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
above?: Locator;
/**
* Matches elements that are below any of the elements matching the inner locator, at any horizontal position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
below?: Locator;
/**
* Matches elements containing an element that matches an inner locator. Inner locator is queried against the outer one.
* For example, `article` that has `text=Playwright` matches `<article><div>Playwright</div></article>`.
@ -9306,33 +9198,6 @@ export interface Locator {
* `<article><div>Playwright</div></article>`.
*/
hasText?: string|RegExp;
/**
* Matches elements that are to the left of any element matching the inner locator, at any vertical position. Inner locator
* is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
leftOf?: Locator;
/**
* Matches elements that are near (<= 50 css pixels) any of the elements matching the inner locator. Inner locator is
* queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
near?: Locator;
/**
* Matches elements that are to the right of any element matching the inner locator, at any vertical position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
rightOf?: Locator;
}): Locator;
/**
@ -9580,24 +9445,6 @@ export interface Locator {
* @param options
*/
locator(selector: string, options?: {
/**
* Matches elements that are above any of the elements matching the inner locator, at any horizontal position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
above?: Locator;
/**
* Matches elements that are below any of the elements matching the inner locator, at any horizontal position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
below?: Locator;
/**
* Matches elements containing an element that matches an inner locator. Inner locator is queried against the outer one.
* For example, `article` that has `text=Playwright` matches `<article><div>Playwright</div></article>`.
@ -9612,33 +9459,6 @@ export interface Locator {
* `<article><div>Playwright</div></article>`.
*/
hasText?: string|RegExp;
/**
* Matches elements that are to the left of any element matching the inner locator, at any vertical position. Inner locator
* is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
leftOf?: Locator;
/**
* Matches elements that are near (<= 50 css pixels) any of the elements matching the inner locator. Inner locator is
* queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
near?: Locator;
/**
* Matches elements that are to the right of any element matching the inner locator, at any vertical position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
rightOf?: Locator;
}): Locator;
/**
@ -14110,24 +13930,6 @@ export interface FrameLocator {
* @param options
*/
locator(selector: string, options?: {
/**
* Matches elements that are above any of the elements matching the inner locator, at any horizontal position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
above?: Locator;
/**
* Matches elements that are below any of the elements matching the inner locator, at any horizontal position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
below?: Locator;
/**
* Matches elements containing an element that matches an inner locator. Inner locator is queried against the outer one.
* For example, `article` that has `text=Playwright` matches `<article><div>Playwright</div></article>`.
@ -14142,33 +13944,6 @@ export interface FrameLocator {
* `<article><div>Playwright</div></article>`.
*/
hasText?: string|RegExp;
/**
* Matches elements that are to the left of any element matching the inner locator, at any vertical position. Inner locator
* is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
leftOf?: Locator;
/**
* Matches elements that are near (<= 50 css pixels) any of the elements matching the inner locator. Inner locator is
* queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
near?: Locator;
/**
* Matches elements that are to the right of any element matching the inner locator, at any vertical position. Inner
* locator is queried against the same root as the outer one. More details in
* [layout selectors](https://playwright.dev/docs/selectors#selecting-elements-based-on-layout) guide.
*
* Note that outer and inner locators must belong to the same frame. Inner locator must not contain [FrameLocator]s.
*/
rightOf?: Locator;
}): Locator;
/**

View file

@ -144,7 +144,7 @@ it('should support locator.filter', async ({ page, trace }) => {
it('should enforce same frame for has/leftOf/rightOf/above/below/near', async ({ page, server }) => {
await page.goto(server.PREFIX + '/frames/two-frames.html');
const child = page.frames()[1];
for (const option of ['has', 'leftOf', 'rightOf', 'above', 'below', 'near']) {
for (const option of ['has']) {
let error;
try {
page.locator('div', { [option]: child.locator('span') });

View file

@ -223,117 +223,56 @@ it('should work with layout selectors', async ({ page, trace }) => {
}, boxes);
expect(await page.$eval('div:right-of(#id6)', e => e.id)).toBe('id7');
expect(await page.$eval('div >> right-of="#id6"', e => e.id)).toBe('id7');
expect(await page.locator('div', { rightOf: page.locator('#id6') }).first().evaluate(e => e.id)).toBe('id7');
expect(await page.$eval('div:right-of(#id1)', e => e.id)).toBe('id2');
expect(await page.$eval('div >> right-of="#id1"', e => e.id)).toBe('id2');
expect(await page.$eval('div:right-of(#id3)', e => e.id)).toBe('id4');
expect(await page.$eval('div >> right-of="#id3"', e => e.id)).toBe('id4');
expect(await page.$('div:right-of(#id4)')).toBe(null);
expect(await page.$('div >> right-of="#id4"')).toBe(null);
expect(await page.$eval('div:right-of(#id0)', e => e.id)).toBe('id7');
expect(await page.$eval('div >> right-of="#id0"', e => e.id)).toBe('id7');
expect(await page.$eval('div:right-of(#id8)', e => e.id)).toBe('id9');
expect(await page.$eval('div >> right-of="#id8"', e => e.id)).toBe('id9');
expect(await page.$$eval('div:right-of(#id3)', els => els.map(e => e.id).join(','))).toBe('id4,id2,id5,id7,id8,id9');
expect(await page.$$eval('div >> right-of="#id3"', els => els.map(e => e.id).join(','))).toBe('id4,id2,id5,id7,id8,id9');
expect(await page.locator('div', { rightOf: page.locator('#id3') }).locator('span').evaluateAll(els => els.map(e => e.textContent).join(','))).toBe('4,2,5,7,8,9');
expect(await page.$$eval('div:right-of(#id3, 50)', els => els.map(e => e.id).join(','))).toBe('id2,id5,id7,id8');
expect(await page.$$eval('div >> right-of="#id3",50', els => els.map(e => e.id).join(','))).toBe('id2,id5,id7,id8');
expect(await page.$$eval('div >> right-of="#id3",50 >> span', els => els.map(e => e.textContent).join(','))).toBe('2,5,7,8');
expect(await page.$$eval('div:right-of(#id3, 49)', els => els.map(e => e.id).join(','))).toBe('id7,id8');
expect(await page.$$eval('div >> right-of="#id3",49', els => els.map(e => e.id).join(','))).toBe('id7,id8');
expect(await page.$$eval('div >> right-of="#id3",49 >> span', els => els.map(e => e.textContent).join(','))).toBe('7,8');
expect(await page.$eval('div:left-of(#id2)', e => e.id)).toBe('id1');
expect(await page.$eval('div >> left-of="#id2"', e => e.id)).toBe('id1');
expect(await page.locator('div', { leftOf: page.locator('#id2') }).first().evaluate(e => e.id)).toBe('id1');
expect(await page.$('div:left-of(#id0)')).toBe(null);
expect(await page.$('div >> left-of="#id0"')).toBe(null);
expect(await page.$eval('div:left-of(#id5)', e => e.id)).toBe('id0');
expect(await page.$eval('div >> left-of="#id5"', e => e.id)).toBe('id0');
expect(await page.$eval('div:left-of(#id9)', e => e.id)).toBe('id8');
expect(await page.$eval('div >> left-of="#id9"', e => e.id)).toBe('id8');
expect(await page.$eval('div:left-of(#id4)', e => e.id)).toBe('id3');
expect(await page.$eval('div >> left-of="#id4"', e => e.id)).toBe('id3');
expect(await page.$$eval('div:left-of(#id5)', els => els.map(e => e.id).join(','))).toBe('id0,id7,id3,id1,id6,id8');
expect(await page.$$eval('div >> left-of="#id5"', els => els.map(e => e.id).join(','))).toBe('id0,id7,id3,id1,id6,id8');
expect(await page.$$eval('div:left-of(#id5, 3)', els => els.map(e => e.id).join(','))).toBe('id7,id8');
expect(await page.$$eval('div >> left-of="#id5",3', els => els.map(e => e.id).join(','))).toBe('id7,id8');
expect(await page.$$eval('div >> left-of="#id5",3 >> span', els => els.map(e => e.textContent).join(','))).toBe('7,8');
expect(await page.$eval('div:above(#id0)', e => e.id)).toBe('id3');
expect(await page.$eval('div >> above="#id0"', e => e.id)).toBe('id3');
expect(await page.locator('div', { above: page.locator('#id0') }).first().evaluate(e => e.id)).toBe('id3');
expect(await page.$eval('div:above(#id5)', e => e.id)).toBe('id4');
expect(await page.$eval('div >> above="#id5"', e => e.id)).toBe('id4');
expect(await page.$eval('div:above(#id7)', e => e.id)).toBe('id5');
expect(await page.$eval('div >> above="#id7"', e => e.id)).toBe('id5');
expect(await page.$eval('div:above(#id8)', e => e.id)).toBe('id0');
expect(await page.$eval('div >> above="#id8"', e => e.id)).toBe('id0');
expect(await page.$eval('div:above(#id9)', e => e.id)).toBe('id8');
expect(await page.$eval('div >> above="#id9"', e => e.id)).toBe('id8');
expect(await page.$('div:above(#id2)')).toBe(null);
expect(await page.$('div >> above="#id2"')).toBe(null);
expect(await page.$$eval('div:above(#id5)', els => els.map(e => e.id).join(','))).toBe('id4,id2,id3,id1');
expect(await page.$$eval('div >> above="#id5"', els => els.map(e => e.id).join(','))).toBe('id4,id2,id3,id1');
expect(await page.$$eval('div:above(#id5, 20)', els => els.map(e => e.id).join(','))).toBe('id4,id3');
expect(await page.$$eval('div >> above="#id5",20', els => els.map(e => e.id).join(','))).toBe('id4,id3');
expect(await page.$eval('div:below(#id4)', e => e.id)).toBe('id5');
expect(await page.$eval('div >> below="#id4"', e => e.id)).toBe('id5');
expect(await page.locator('div', { below: page.locator('#id4') }).first().evaluate(e => e.id)).toBe('id5');
expect(await page.$eval('div:below(#id3)', e => e.id)).toBe('id0');
expect(await page.$eval('div >> below="#id3"', e => e.id)).toBe('id0');
expect(await page.$eval('div:below(#id2)', e => e.id)).toBe('id4');
expect(await page.$eval('div >> below="#id2"', e => e.id)).toBe('id4');
expect(await page.$eval('div:below(#id6)', e => e.id)).toBe('id8');
expect(await page.$eval('div >> below="#id6"', e => e.id)).toBe('id8');
expect(await page.$eval('div:below(#id7)', e => e.id)).toBe('id8');
expect(await page.$eval('div >> below="#id7"', e => e.id)).toBe('id8');
expect(await page.$eval('div:below(#id8)', e => e.id)).toBe('id9');
expect(await page.$eval('div >> below="#id8"', e => e.id)).toBe('id9');
expect(await page.$('div:below(#id9)')).toBe(null);
expect(await page.$('div >> below="#id9"')).toBe(null);
expect(await page.$$eval('div:below(#id3)', els => els.map(e => e.id).join(','))).toBe('id0,id5,id6,id7,id8,id9');
expect(await page.$$eval('div >> below="#id3"', els => els.map(e => e.id).join(','))).toBe('id0,id5,id6,id7,id8,id9');
expect(await page.$$eval('div:below(#id3, 105)', els => els.map(e => e.id).join(','))).toBe('id0,id5,id6,id7');
expect(await page.$$eval('div >> below="#id3" , 105', els => els.map(e => e.id).join(','))).toBe('id0,id5,id6,id7');
expect(await page.$eval('div:near(#id0)', e => e.id)).toBe('id3');
expect(await page.$eval('div >> near="#id0"', e => e.id)).toBe('id3');
expect(await page.locator('div', { near: page.locator('#id0') }).first().evaluate(e => e.id)).toBe('id3');
expect(await page.$$eval('div:near(#id7)', els => els.map(e => e.id).join(','))).toBe('id0,id5,id3,id6');
expect(await page.$$eval('div >> near="#id7"', els => els.map(e => e.id).join(','))).toBe('id0,id5,id3,id6');
expect(await page.$$eval('div:near(#id0)', els => els.map(e => e.id).join(','))).toBe('id3,id6,id7,id8,id1,id5');
expect(await page.$$eval('div >> near="#id0"', els => els.map(e => e.id).join(','))).toBe('id3,id6,id7,id8,id1,id5');
expect(await page.$$eval('div:near(#id6)', els => els.map(e => e.id).join(','))).toBe('id0,id3,id7');
expect(await page.$$eval('div >> near="#id6"', els => els.map(e => e.id).join(','))).toBe('id0,id3,id7');
expect(await page.$$eval('div:near(#id6, 10)', els => els.map(e => e.id).join(','))).toBe('id0');
expect(await page.$$eval('div >> near="#id6",10', els => els.map(e => e.id).join(','))).toBe('id0');
expect(await page.$$eval('div:near(#id0, 100)', els => els.map(e => e.id).join(','))).toBe('id3,id6,id7,id8,id1,id5,id4,id2');
expect(await page.$$eval('div >> near="#id0",100', els => els.map(e => e.id).join(','))).toBe('id3,id6,id7,id8,id1,id5,id4,id2');
expect(await page.$$eval('div:below(#id5):above(#id8)', els => els.map(e => e.id).join(','))).toBe('id7,id6');
expect(await page.$$eval('div >> below="#id5" >> above="#id8"', els => els.map(e => e.id).join(','))).toBe('id7,id6');
expect(await page.$eval('div:below(#id5):above(#id8)', e => e.id)).toBe('id7');
expect(await page.$eval('div >> below="#id5" >> above="#id8"', e => e.id)).toBe('id7');
expect(await page.locator('div', { below: page.locator('#id5'), above: page.locator('#id8') }).first().evaluate(e => e.id)).toBe('id7');
expect(await page.$$eval('div:right-of(#id0) + div:above(#id8)', els => els.map(e => e.id).join(','))).toBe('id5,id6,id3');
const error = await page.$(':near(50)').catch(e => e);
expect(error.message).toContain('"near" engine expects a selector list and optional maximum distance in pixels');
const error1 = await page.$(`div >> left-of=abc`).catch(e => e);
expect(error1.message).toContain('Malformed selector: left-of=abc');
const error2 = await page.$(`left-of="div"`).catch(e => e);
expect(error2.message).toContain('"left-of" selector cannot be first');
const error3 = await page.$(`div >> left-of=33`).catch(e => e);
expect(error3.message).toContain('Malformed selector: left-of=33');
const error4 = await page.$(`div >> left-of="span","foo"`).catch(e => e);
expect(error4.message).toContain('Malformed selector: left-of="span","foo"');
const error5 = await page.$(`div >> left-of="span",3,4`).catch(e => e);
expect(error5.message).toContain('Malformed selector: left-of="span",3,4');
});
it('should escape the scope with >>', async ({ page }) => {