Count, copy, and validate a group of spans using Protractor with AngularJS

As a beginner in automated testing, Protractor, and angularJS, I am looking for guidance on counting and verifying text in a list. The list contains items like Attractions, Capacity, and Content, which inform the user of their privileges.

Here is the relevant .html snippet:

<div class="home-info">
  <div class="home-top home-section">
    <h3>User Information</h3>
    <div class="home-box">
      <div class="property-group wide">
        <span>
                    Change Phillips<br />
                </span>
      </div>
    </div>
    <div class="home-box">
      <div class="property-group wide">
        <div>Editors:</div>
        <span>
                    <ul class="property-stack">
                        <li><span>Attractions</span>
        </li>
        <li><span>Capacity</span>
        </li>
        <li><span>Content</span>
        </li>
        <li><span>Media</span>
        </li>
        <li><span>Options</span>
        </li>
        <li></li>
        <li></li>
        <li><span>Upload CADs</span>
        </li>
        </ul>
        </span>
      </div>
    </div>
  </div>

I have attempted to write code to verify the text but facing issues with using .all method. Here is what I have so far:

        var text = "";
        browser.driver.findElement.all(By.xpath("//li/span")).count().then(function(count) {
          initialCount = count;
          console.log(initialCount);
        });
        browser.driver.findElement(By.xpath("//li/span")).getText().then(function(text) {
          console.log(text);
        });

I am confused on how to proceed without using xpath as recommended. Any assistance would be greatly appreciated. Thank you.

Code used for matching:

        expect(myLists).toEqual(['Attractions', 'Capacity', 'Conent',
          'Media', 'Options', 'Upload CADs'
        ]);

Answer №1

If you're unsure about the version of protractor you're using, you should be able to simply call element without the browser or driver prefix. Utilizing element.all will provide you with the array of elements you are seeking.

To access specific indexes within that array, you can use the .get(index) suffix to the element.all method.

Here is a step-by-step breakdown:

1. Obtain the array of elements

2. Determine the count of the array

3. Execute a for loop to iterate through all the indexes of the array

4. For each index of the array, invoke the getText() function and print it to the console

var j = 0;  
var textList = [];
var text = "";
var myLists = element.all(by.css("li span"));
myLists.count().then(function(count) {
  console.log(count);
  for(int i = 0; i < count; i++){
    myLists.get(i).getText().then(function(text) {
    textList[j++] = text; 
    console.log(text);
    });
  }
});

EDIT:

Upon further research, I discovered another method to iterate through the array of elements by utilizing the .each() suffix with element.all.

var j = 0;  
var textList = [];
var text = "";
var myLists = element.all(by.css("li span"));
myLists.count().then(function(count) {
    console.log(count);
    myLists.each(function(element, index) {
        element.getText().then(function (text) {
        textList[j++] = text;
        console.log(index, text);
      });
    });
});

You can utilize the textList array for matching purposes.

   expect(textList).toEqual(['Attractions', 'Capacity', 'Conent',
      'Media', 'Options', 'Upload CADs'
    ]);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Could you provide the parameters for the next() function in Express?

Working with Express.js to build an API has been a game-changer for me. I've learned how to utilize middlewares, handle requests and responses, navigate through different middleware functions... But there's one thing that keeps boggling my mind, ...

What is the best way to show emojis in AngularJS?

Recently starting to work with angularjs, I've incorporated "emoji-min.js" and "emoji-min.css" into my project as an attempt to display emojis within a text field. Despite my efforts, the emojis are not displaying as intended. Here is a snippet of my ...

Obtain distinct values from an array of dictionaries and form a new dictionary

Looking at the JSON data provided below: [{ "name": "Il Brigante", "rating": "5.0", "match": "87", "cuisine": "Italian", "imageUrl": "/image-0.png" }, { "name": "Giardino Doro Ristorante", "rating": "5.0", "match": "87", ...

Renaming and destructuring of an array's length using ReactJS

I am working with a reduce function shown below: let el = scopes.reduce ((tot, {actions}) => tot + actions.length, 0); I attempted to modify it as follows, but it appears that this is not the correct approach: let el = scopes.reduce ((tot, {actions.l ...

Unable to retrieve information from the API

I have created some Graphs using Graph js and now I want to visualize the data within them. Even though I am able to fetch the data and display it in the console, I am facing issues with displaying it in the actual graph. Despite trying multiple methods, ...

Rest assured, with Ajax Security, your protection is in good

I am currently developing a browser game that heavily utilizes AJAX instead of page refreshes. The combination of PHP and JavaScript is being employed for this project. However, during the course of my work, I became aware of the potential security vulnera ...

Ruby on Rails: clearing the asset pipeline cache by hand

While Rails usually clears the asset pipeline cache automatically when files are modified, I am facing a unique situation. I am providing my application as an HTML response to an Ajax request, cross-domain using rack-cors to bypass CORS. The issue arises ...

vuejs mounted: Unable to assign a value to an undefined variable

When I try to run the function below upon mounted, I encounter an error: "Cannot set the property 'days' of undefined" Here is my code snippet: function getDays(date) { this.days = (new Date()).getTime() / ...

Tips for adding HTML table information to a database

I have a table in HTML where one column can be edited, and I need to save that data into my database. Firstly, here is the code snippet: var tableData = [{ "Item Code": "C001", "Item Name": "Beverages", "Quantity": "0" }, { ...

Utilizing jQuery AJAX to enable a functional back button feature upon modifying HTML

While there are numerous inquiries regarding jQuery and Back button issues, the focal point is typically on maintaining history features when using the browser back/forward buttons. One specific query I have is how to load an AJAX-affected HTML page when ...

Following a successful login, the User ID fails to store in the session

I am a beginner in the world of coding and I am currently working on one of my first apps. I have encountered an issue with my log in function. After user registration, the user id is successfully saved in the session object. However, it does not save into ...

What is the reason behind a number having its final two digits transformed into zeros?

Query Hello, I was coding my discord bot and storing user IDs in a database. I plan to use these IDs to ping or assign roles to users. Issue However, I encountered a problem where the IDs in the database are being altered. For example, from 5336929053871 ...

The absence of the Three.js file in my HTML file is noticeable

Currently, I am diving into HTML5 and experimenting with the Three.js 3D engine. While following a tutorial from this source, it was recommended that I include the three.js file in my HTML document. However, I encountered two files with the same name and d ...

Tips for eliminating repeated values in a textbox

<script> $("#filter").on("shown.bs.popover",function(){ $(".popover-content input[type=checkbox]").on("click",function(){ if(this.checked) { this.setAttribute("checked","checked"); } else { ...

Variable that can be accessed globally in Node.js

Within my node.js server-side code, specifically in a post route accessed through form submission, I have a variable named username. I want to find a way to use this same variable in a different post route. app.post("/login", function(req, res) { var ...

What is the best way to retrieve the id of the chosen option within a <select> element?

In my index.html file, I have a < select > field and a button: <select id="mylist"></select> <input type="button" id="btn" value="update"> The provided Javascript code is designed to update the options of the < select > fie ...

Modifying the nested data organization in Sequelize

I'm looking to adjust the data structure retrieved from an ORM query involving four tables. The product and category tables have a many-to-many relationship, with the product_category table serving as a bridge. Additionally, there's a fourth tabl ...

Encountering errors like "Cannot find element #app" and "TypeError: Cannot read property 'matched' of undefined" typically happens when using vue-router

Recently, I decided to dive into Vue.js as a way to revamp an existing frontend app that was originally built using Scala Play. My goal is to explore the world of component-based web design and enhance my skills in this area. Initially, everything seemed ...

Prevent the selection of Single Origin and House Blend options once the user opts for Espresso

<td> <select class="type"> <option value="Espresso">Espresso</option> <option value="" class="">Cappuccino</option> <opti ...

The output.library.type variable in WebPack is not defined

Currently, I am delving into WebPack with a shortcode. As part of my learning process, I am working on a code snippet that involves calculating the cube and square of a number, which are then supposed to be stored in a variable outlined in the webpack.conf ...