How can the actual values from the Repeater be retrieved using Protractor, instead of the Elements?

Question

How can the actual values from the Repeater be retrieved using Protractor, instead of the Elements?

As I develop a Protractor script to test my quiz game, which involves displaying random questions and answers, I am faced with the challenge of identifying the correct answer. This information is not directly available as an element on the page, so I need a way to access it through the model.

The model stores the answers in Choice in Question.Choices, and I specifically need to locate the Choice where Choice.IsCorrect is true. How can I retrieve this value without relying on elements?

Would using the element() function be appropriate for this task?

element(by.repeater('Choice in Question.Choices').row(0).column('Choice.IsCorrect'))

javascript angularjs testing protractor end-to-end

Answer 1

Answer №1

One way to approach this is by utilizing the combination of element.all() along with filter() and evaluate():

You can create a variable called correctChoices which uses element.all(by.repeater('Choice in Question.Choices')).filter(function (elm) {
    return elm.evaluate('Choice.IsCorrect').then(function (value) {
        return value;
    });
});

In this case, the correctChoices array will store elements where the property Choice.IsCorrect evaluates to true.

To retrieve an array of values for the correct choices, you can make use of map() alongside getAttribute():

correctChoices.map(function (elm) {
    return elm.getAttribute('value');
});

Alternatively, if you require the text content, you can utilize getText():

correctChoices.map(function (elm) {
    return elm.getText();
});

Answer 2

One way to approach this is by utilizing the combination of element.all() along with filter() and evaluate():

You can create a variable called correctChoices which uses element.all(by.repeater('Choice in Question.Choices')).filter(function (elm) {
    return elm.evaluate('Choice.IsCorrect').then(function (value) {
        return value;
    });
});

In this case, the correctChoices array will store elements where the property Choice.IsCorrect evaluates to true.

To retrieve an array of values for the correct choices, you can make use of map() alongside getAttribute():

correctChoices.map(function (elm) {
    return elm.getAttribute('value');
});

Alternatively, if you require the text content, you can utilize getText():

correctChoices.map(function (elm) {
    return elm.getText();
});

How can the actual values from the Repeater be retrieved using Protractor, instead of the Elements?

Answer №1

Similar questions

Tips for preventing a page refresh using HTML, JQuery, AJAX, and PHP

Struggling to transfer information between POST and GET requests in Node/Express

Display a date that is asynchronously rendered for each item in the v-for loop

Adjust the scope of information within a function

Upgrade from Next.js version 12

Tricks for displaying a dynamic object tooltip in Three.js

Encountering difficulties when trying to send requests to an API through AJAX

The lack of intellisense in VS Code for Node.js poses a significant challenge for developers

Error occurs when running Visual Studio Code locally - variable not defined

Clicking on the (x) button element will eliminate the DOM node from a list

Navigating with Next.js Router: Dynamic URLs and the power of the back button

I'm looking for a solution to reorganize my current state in order to display the image URL

What is the formula for determining the size of an image using JavaScript, jQuery, or Java?

What is the best way to convert the data stored in an object to an array?

Can someone explain the inner workings of the Typescript property decorator?

Executing JavaScript after an ng-repeat in AngularJS has completed can be accomplished by using the

Methods for transferring data to controller in Angular Modal service

Encountering an issue while implementing a fresh design using Material-UI Version 5 and React Version 18.01 - Specifically facing problems with the '@mui/styles' package

What could be causing my Bootstrap carousel to only slide once?

"Incorporate an image into the data of an AJAX POST request for a web service invocation