Get List Items by Attribute
To test the component, we want to assert that there's one correct answer button, and that its text is UI Test Automation Model. We also want to write test code against the set of incorrect answer buttons.
If you can use a selector to target the elements you need in a test, you should.
In this case, to use a selector we need to add some semantic information to each button to declare whether it contains the correct answer.
<button data-correct-answer="true">UI Test Automation Model</button>
<button data-correct-answer="false">UI Tests Are Marvelous</button>
<button data-correct-answer="false">UI Test Action Model</button>
The page object has a basic element. Its selector uses the %s parameter to generate a method that accepts a string. It also returns a list by declaring "returnAll": true.
UTAM generates this method:
getCorrectAnswerButtons(value: string): Promise<(_BaseUtamElement)[]>;
Test code calls the method and passes a boolean to get a list of correct answer and a list of incorrect answers to operate on.
Click Run Tests.
Instead of adding an HTML attribute, we could have selected all the buttons and generated a getButtons method. The test code would have to loop over the buttons and test for the text value of each. It's not ideal to write so much imperative code.
The next tutorial introduces the filter, which is a declarative way to filter lists.