[Feature] Ability to use layout selectors ('right-of', 'above', etc) if inner selector is Locator #12542

Activity

1. Yury Semikhatsky (yury-s)

   added

   archive

   on Mar 7, 2022
2. Yury Semikhatsky (yury-s)

   assigned

   Dmitry Gozman (dgozman)

   on Mar 7, 2022
3. Yury Semikhatsky (yury-s)

   added

   v1.22

   on Mar 7, 2022
4. mskelton commented on Mar 25, 2022

   

   Mark Skelton (mskelton)

   on Mar 25, 2022

   Contributor

   More actions

   This would make testing patterns like this possible:

   const a = page.locator('"My element"')
   const b = page.locator('"My other element"')
   
   expect(a.above(b)).toBeVisible()

   Could even be neat to have a matcher like this:

   const a = page.locator('"My element"')
   const b = page.locator('"My other element"')
   
   expect(a).toBeAbove(b)

   I'm doing some testing like this to test sorted lists of data. Using the layout selectors are pretty powerful for testing sorting.
5. Dmitry Gozman (dgozman)

   closed this as completedin #13821on May 3, 2022
6. Camo30 commented on Jul 20, 2022

   

   Camo30

   on Jul 20, 2022

   More actions

   Dmitry Gozman (@dgozman) Too bad that these selectors were removed with 0e28553 after adding them with commit 54dd6d0. What was the reason for doing so? I definitely have a use case for that - it would be great to get that back.
7. dgozman commented on Jul 20, 2022

   

   Dmitry Gozman (dgozman)

   on Jul 20, 2022

   Collaborator

   More actions

   Camo30 We were not satisfied with the API, so decided to remove for now. We'll probably bring them back in one of the future release. Let me reopen the issue.

   👀React with 👀1Reacted by Camo30
8. Dmitry Gozman (dgozman)

   reopened this on Jul 20, 2022
9. Camo30 commented on Jul 25, 2022

   

   Camo30

   on Jul 25, 2022

   Last edited by Camo30

   More actions

   Dmitry Gozman (@dgozman) Thanks for reopening. In my opinion the api was a great improvement. I'm heavily using the page objects pattern for locators and because of this I often need to get from one locator to the next one without reusing the same selector twice.

   For example:

   <div class="form-group">
     <input type="text" class="form-control" id="username"></input>
     <div>
       <span class="validation-error"></span>
     </div>
   </div>

   class LoginPage {
       readonly page: Page;
   
       constructor(page: Page) {
           this.page = page;
       }
   
       get userTextBox(): Locator {
           return this.page.locator("id=username");
       }
   
       get userTextBoxValidationAlert(): Locator {
           // The line below works but here I have to reuse the selector which is error prone
           return this.page.locator('#username + div span.validation-error');
   
           // It would be great to be able to use it like that
           // return this.userTextBox.locatorBelow("div span.validation-error");
       }
10. Faithfinder commented on May 25, 2023

    

    Dmitrii Kartashev (Faithfinder)

    on May 25, 2023

    More actions

    Would love to see this. Would allow removing a bunch of hacks.

    👍React with 👍1Reacted by Igor Bari
11. Pavel Feldman (pavelfeldman)

    closed this as not plannedon May 7, 2026