Using an attribute value from one element locator as a dependency to another locator #2412

bhreinb · 2024-06-13T14:33:50Z

bhreinb
Jun 13, 2024

Hi there,

I'm a new user to serenity-js and I"m prototyping it as the de facto tool to do end to end testing for the company I'm with. To start with it's an amazing tool and I like using it so far.

I have been looking at your documentation regarding querying on the page, for reference I'm looking at this https://serenity-js.org/handbook/web-testing/page-element-query-language/#retrieving-text-of-multiple-elements. I have this use case for an app I'm testing and I'm wondering what could be the best approach to use here. I detail my use case below:

Sample HTML

<html>
<body>

<!-- Html --->

<label data-automation-id="formLabel" for="uid57-input">First Name</label>

<!-- Html --->

<input type="text" data-automation-id="textInputBox" id="uid57-input">

<!-- Html --->

<label data-automation-id="formLabel" for="uid58-input">Second Name</label>

<!-- Html --->

<input type="text" data-automation-id="textInputBox" id="uid58-input">

<!-- Html --->

</body>
</html>

In terms of the UI these items appear beside each other but in terms of the html source they are a good bit away from each other if that makes sense. My ambition with the above would be to do something like the following:

Get access to all labels via the following query
PageElements.located(By.css("[data-automation-id='formLabel']"))
Filter on "First Name"
So would likely use a where predicate to filter on that along with the first method to get the label of interest
Get value of "for" attribute from element in previous step
Get access to all inputs via the following query
PageElements.located(By.css("[data-automation-id='textInputBox']"))
I also want to use the attribute value from 3 here too to apply further filtering along with first method

I wanted to have this as a questions api as it would be something that could be used over and over again, albeit the approach may raise eyebrows in terms of best practices it would be very handy in the case of the above. For example the signature of the api would be something like so:

export const getFieldValue = (name: Answerable<string>): QuestionAdapter<string>

Would any have any suggestions on best approaches to solve this? Many thanks for any input regarding the above.

Answered by jan-molak

Jun 13, 2024

Sure, the way you want to approach it makes perfect sense.

Here's how you can do it step by step.

Getting all the labels

import { PageElements, By } from '@serenity-js/web'

const labels = () =>
  PageElements.located(By.css('[data-automation-id="formLabel"]'))
    .describedAs('labels')

Getting a label by its text content

import { PageElements, By, Text } from '@serenity-js/web'
import { includes } from '@serenity-js/assertions'

const labels = () =>
  PageElements.located(By.css('[data-automation-id="formLabel"]'))
    .describedAs('labels')
    
const labelCalled = (name: string) => 
  labels()
    .where(Text, includes(name))
    .first()

Getting and attribute

import { Attribute, Page…

View full answer

jan-molak · 2024-06-13T15:01:48Z

jan-molak
Jun 13, 2024
Maintainer

Sure, the way you want to approach it makes perfect sense.

Here's how you can do it step by step.

Getting all the labels

import { PageElements, By } from '@serenity-js/web'

const labels = () =>
  PageElements.located(By.css('[data-automation-id="formLabel"]'))
    .describedAs('labels')

Getting a label by its text content

import { PageElements, By, Text } from '@serenity-js/web'
import { includes } from '@serenity-js/assertions'

const labels = () =>
  PageElements.located(By.css('[data-automation-id="formLabel"]'))
    .describedAs('labels')
    
const labelCalled = (name: string) => 
  labels()
    .where(Text, includes(name))
    .first()

Getting and attribute

import { Attribute, PageElements, By, Text } from '@serenity-js/web'
import { includes } from '@serenity-js/assertions'

const labels = () =>
  PageElements.located(By.css('[data-automation-id="formLabel"]'))
    .describedAs('labels')
    
const labelCalled = (name: string) => 
  labels()
    .where(Text, includes(name))
    .first()
    
    
const inputIdFor = (labelName: string) =>
  Attribute.called('for')
    .of(labelCalled(labelName))

Getting all the inputs

import { PageElements, By } from '@serenity-js/web'

const inputs = () =>
  PageElements.located(By.css('[data-automation-id="textInputBox"]'))
    .describedAs('inputs')

Getting an input based on its label text

The first way to get an input based on its label text is to use the .where clause, which is useful if you have more than one expectation you want to apply:

import { Attribute, PageElements, By, Text } from '@serenity-js/web'
import { includes } from '@serenity-js/assertions'

const labels = () =>
  PageElements.located(By.css('[data-automation-id="formLabel"]'))
    .describedAs('labels')
    
const labelCalled = (name: string) => 
  labels()
    .where(Text, includes(name))
    .first()
    
const inputIdFor = (labelName: string) =>
  Attribute.called('for')
    .of(labelCalled(labelName))
    
const inputs = () =>
  PageElements.located(By.css('[data-automation-id="textInputBox"]'))
    .describedAs('inputs')
    
const inputCalled = (name: string) =>
  inputs()
    .where(Attribute.called('id'), equals( inputIdFor(name) ))
    .first()
    .describedAs(`input for ${name}`)

The other way to do it is to generate the CSS selector dynamically (note that all By.__(selector) methods, like By.id, accept Answerable<string>):

const inputCalled = (name: string) =>
  PageElements.located(By.id(inputIdFor(name)))
    .describedAs(`input for ${name}`)
    .first()

2 replies

bhreinb Jun 14, 2024
Author

Hi @jan-molak

Many thanks for the response to the above. Very good suggestion and generating the CSS selector dynamically seems to be the best approach.

I do have another caveat to the above

const locInputIdFor = (labelName: string) : Answerable<string> =>
    Attribute.called('for')
        .of(locFieldLabelCalled(labelName)) as Answerable<string>

so assuming this snippet of HTML

<label data-automation-id="formLabel" for="uid57-input">First Name</label>

the return from method locInputIdFor would be uid57-input. Let's assume I wanted to apply a slight string transformation on that i.e. trim the -input aspect to be uid57 is that possible to do?
I notice Answerable is an alias per se

export type Answerable<T> = Question<Promise<T>> | Question<T> | Promise<T> | T;

so would I need to cast to its actual return rather than the alias to do some further transformation?

jan-molak Jun 14, 2024
Maintainer

You're right about the Answerable, but notice how Attribute.called(name).of(pageElement) conveniently returns a QuestionAdapter.

A QuestionAdapter uses JavaScript Proxy objects to offer access to methods and fields on the underlying value, and make them compatible with the async data structures used by Serenity/JS.

In short, you should be able to achieve what you're after like this:

const locInputIdFor = (labelName: string) : Answerable<string> =>
    Attribute.called('for')
        .of(locFieldLabelCalled(labelName))
        .replace('-input', '')

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Serenity/JS

Using an attribute value from one element locator as a dependency to another locator #2412

{{title}}

Replies: 1 comment 2 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Serenity/JS

Using an attribute value from one element locator as a dependency to another locator #2412

bhreinb Jun 13, 2024

Getting all the labels

Getting a label by its text content

Getting and attribute

Replies: 1 comment · 2 replies

jan-molak Jun 13, 2024 Maintainer

Getting all the labels

Getting a label by its text content

Getting and attribute

Getting all the inputs

Getting an input based on its label text

bhreinb Jun 14, 2024 Author

jan-molak Jun 14, 2024 Maintainer

bhreinb
Jun 13, 2024

Replies: 1 comment 2 replies

jan-molak
Jun 13, 2024
Maintainer

bhreinb Jun 14, 2024
Author

jan-molak Jun 14, 2024
Maintainer