Skip to content

Locator Strategy

Info

INGenious uses the built-in locator strategy exposed by Playwright and provides an easy interface to configure them

Role

Locate by Role

Consider this DOM example :

role1

You can locate each element by its implicit role:

page.getByRole(AriaRole.HEADING,new Page.GetByRoleOptions().setName("Sign up"))
In INGenious Playwright Studio, you will add it as this :

role2

page.getByRole(AriaRole.CHECKBOX,new Page.GetByRoleOptions().setName("Subscribe"))
In INGenious Playwright Studio, you will add it as this :

role3

page.getByRole(AriaRole.BUTTON,new Page.GetByRoleOptions().setName("Submit"))
In INGenious Playwright Studio, you will add it as this :

role4

  • Exact Option

Sometimes you may have texts or names with partial matches in the DOM. For example :

  • A Button with text Submit
  • A Button with text Submit Your Application

In this case, to identify the first one, you can use the following:

page.getByRole(AriaRole.BUTTON,new Page.GetByRoleOptions().setName("Submit").setExact(true))
In INGenious Playwright Studio, you will add it as this :

role5

Label

Locate by Label

Consider this DOM example :

label1

You can locate the element by the label text:

  • Password Input Box

page.getByLabel("Password")
In INGenious Playwright Studio, you will add it as this :

label2

  • Exact Option

Sometimes you may have texts or Labels with partial matches in the DOM. For example :

  • A Label with text Address
  • A Label with text Secondary Address

In this case, to identify the first one, you can use the following:

page.getByLabel("Address",new Page.GetByLabelOptions().setExact(true))
In INGenious Playwright Studio, you will add it as this :

label3

Placeholder

Locate by Placeholder

Consider this DOM example :

placeholder1

You can locate the element by the placeholder text:

  • Input Box

page.getByPlaceholder("name@example.com")
In INGenious Playwright Studio, you will add it as this :

placeholder2

  • Exact Option

Sometimes you may have placeholder with partial matches in the DOM. For example :

  • A Placeholder with text Email
  • A Placeholder with text Secondary Email

In this case, to identify the first one, you can use the following:

page.getByPlaceholder("Email", new Page.GetByPlaceholderOptions().setExact(true))
In INGenious Playwright Studio, you will add it as this :

placeholder3

Text

Locate by Text

Consider this DOM example :

text1

You can locate the element by the text it contains:

  • Span

page.getByText("Welcome, John")
In INGenious Playwright Studio, you will add it as this :

text2

  • Exact Option

Sometimes you may have texts with partial matches in the DOM. For example :

  • A header with text Welcome
  • A span with text Welcome, John

In this case, to identify the first one, you can use the following:

page.getByText("Welcome", new Page.GetByTextOptions().setExact(true))
In INGenious Playwright Studio, you will add it as this :

text3

Alt Text

Locate by Alt Text

Consider this DOM example :

alttext1

You can locate the element by the alt text:

  • Image

page.getByAltText("playwright logo")
In INGenious Playwright Studio, you will add it as this :

alttext2

  • Exact Option

Sometimes you may have alt texts with partial matches in the DOM. For example :

  • An img with alt test ING
  • An img with alt text ING Lion

In this case, to identify the first one, you can use the following:

page.getByAltText("ING", new Page.GetByAltTextOptions().setExact(true));
In INGenious Playwright Studio, you will add it as this :

alttext3

Title

Locate by Title

Consider this DOM example :

title1

You can locate the element by the title :

  • Image

page.getByTitle("Issues count")
In INGenious Playwright Studio, you will add it as this :

title2

  • Exact Option

Sometimes you may have titles with partial matches in the DOM. For example :

  • A span with title Payments
  • An span with title Domestic Payments

In this case, to identify the first one, you can use the following:

page.getByTitle("Payments", new Page.GetByTitleOptions().setExact(true))
In INGenious Playwright Studio, you will add it as this :

title3

Test Id

Locate by Test Id

Consider this DOM example :

testid1

You can locate the element by the title :

  • Button

page.getByTestId("directions")
In INGenious Playwright Studio, you will add it as this :

testid2

XPath or CSS

Locate by XPath or CSS

  • For CSS :

In INGenious Playwright Studio, you will add it as this :

css

  • For Xpath :

In INGenious Playwright Studio, you will add it as this :

xpath

Piercing Shadow DOM

Locate in Shadow DOM

All locators in Playwright by default work with elements in Shadow DOM. The exceptions are:

  • Locating by XPath does not pierce shadow roots.
  • Closed-mode shadow roots are not supported.

Consider the following example with a custom web component:

<x-details role=button aria-expanded=true aria-controls=inner-details>
<div>Title</div>
#shadow-root
    <div id=inner-details>Details</div>
</x-details>
You can locate in the same way as if the shadow root was not present at all.

page.getByText("Details")

In INGenious Playwright Studio, you will add it as this :

shadowDom

Frames

Locate in Frames

All locators in Playwright by default work with elements inside a frame/iframe. But first you need to let the page locate the frame using the framelocator function.

You can do that in this way : 

page.frameLocator("iframe[name='firstFr']").getByPlaceholder("Enter name")

In INGenious Playwright Studio, you will add it as this :

singleframe

If there are nested frames, then just add the frame locators separated by semicolon, in the Frame box :

multipleframes