Skip to content

[Question] Supporting Locator as an argument to page.locator()? #16574

Closed

Description

@np-xavier

As per the docs, I keep elements on my page objects as Locators. Often times, I'll have something like

container = this.page.locator('.container');
container-button = this.page.locator('button');
container-title = this.page.locator('h3');

And it's often the case that container-button and container-title are children of container in the DOM.

If I have multiple .container elements on the page, I will want to filter one down, maybe with something like container.filter({ hasText: 'foo123')} that is determined solely at runtime.

Now, if I want to access any of my predefined container-button or container-title locators that are inside this runtime-decided container, I was hoping to just be able to do:

container.locator(container-button) to give me the button element within that arbitrary container. But, locator() only allows a selector string to be passed in, so my obviously option is to define both a selector string and locator in the PageObject class, e.g. container-button-css: string and container-button: Locator, then I can use something like

container.locator(container-button-css)

But it's inelegant because I'm maintaining two properties. Just wondering what the best approach is with something like this? It would be nice if .locator() supported Locators themselves, or alternatively you could extract some kind of Locator.selectorText property from it.

Any thoughts?

Activity

  1. CtrlZvi commented on Aug 27, 2022

    @CtrlZvi

    I believe this already exists. Take a look at the has filter for locators.

  2. np-xavier commented on Aug 30, 2022

    @np-xavier
    Author

    I believe this already exists. Take a look at the has filter for locators.

    It's slightly more subtle - that gives me the element containing the sub-element, I need the sub-element itself. It's more down to the fact I have to pass it a text selector, and I can't pass it a Locator. My PageObjects all use Locators.

  3. mburns02 commented on Jan 6, 2023

    @mburns02

    bump

  4. heygarrett commented on Mar 26, 2023

    @heygarrett

    I'm not sure when it was added, but this seems to exist now:

    You can also chain two locators together, for example to find a "Save" button inside a particular dialog:

    const saveButton = page.getByRole('button', { name: 'Save' });
    // ...
    const dialog = page.getByTestId('settings-dialog');
    await dialog.locator(saveButton).click();
    

    Edit: I forgot to include a link to the docs:
    https://playwright.dev/docs/locators#chaining-locators

    Edit 2: I didn't realize this had only been updated for the Locator.locator method, not the Page.locator method. I wonder why. 🤔

  5. pavelfeldman commented on Nov 17, 2023

    @pavelfeldman
    Member

    Why was this issue closed?

    Thank you for your involvement. This issue was closed due to limited engagement (upvotes/activity), lack of recent activity, and insufficient actionability. To maintain a manageable database, we prioritize issues based on these factors.

    If you disagree with this closure, please open a new issue and reference this one. More support or clarity on its necessity may prompt a review. Your understanding and cooperation are appreciated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions