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

JSPath

Locate by JSPath

JSPath allows you to identify an element using a JavaScript path copied from browser developer tools.

For example, in Chrome or Edge DevTools:

Right-click Element → Copy → Copy JS Path

Example JSPath:

document.querySelector("#app > div > button")

In INGenious Playwright Studio, you can paste this value into the JSPath attribute of a Web Object.

Discouraged

The JSPath attribute can be used with JavaScript paths copied directly from browser developer tools.

While supported, this locator strategy is generally less reliable and maintainable than attributes such as Role, Text, Label, CSS, or XPath. For this reason, JSPath is marked as [Discouraged] in the Object Repository UI and should only be used when other locator strategies are not suitable.