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

docs/src/api/params.md

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

packages/playwright-core/src/client/locator.ts

@@ -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) {
+    if (options?.has) {
-      const locator = options?.[inner];
+      const locator = options.has;
-      if (!locator)
-        continue;
       if (locator._frame !== frame)
-        throw new Error(`Inner "${inner}" locator must belong to the same frame.`);
+        throw new Error(`Inner "has" locator must belong to the same frame.`);
-      const engineName = inner === 'leftOf' ? 'left-of' : (inner === 'rightOf' ? 'right-of' : inner);
+      this._selector += ` >> has=` + JSON.stringify(locator._selector);
-      this._selector += ` >> ${engineName}=` + JSON.stringify(locator._selector);
     }
   }
 

packages/playwright-core/src/server/injected/injectedScript.ts

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

packages/playwright-core/src/server/selectors.ts

@@ -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([

packages/playwright-core/types/types.d.ts

@@ -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;
 
   /**

tests/config/experimental.d.ts

@@ -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;
 
   /**

tests/page/locator-query.spec.ts

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

tests/page/selectors-misc.spec.ts

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