Element by Index


#1

Hello:
What is Element by Index? Obviously, we are iterating through an array, but what are some concrete uses for this action? Could you please give an example with a publicly accessible website?
Thanks!


#2

Hi @micheleaz!
Yes, you are right. The action uses the iteration on an array to select a specific item from it. For example, a dropdown menu, or any list that contains multiple items is eligible for this action. The action tajes all the options from the (let’s say a dropdown menu), and stores them in a list. Next, it takes an integer ( zero-based index number) as a parameter, picks an item located on that index number from a list, and performs the .getText(), .click() methods on it, or stores the element as a variable.
For an example with a publicly accessible website, check out this how-to topic
You can find the detailed explanations of our user actions here.


#3

Hello @micheleaz,

Yep sure here is a small sample.
Looking at https://the-internet.herokuapp.com/tables you’ll find two datatables. Now lets assume the following use cases are to be handled:

  • Assert that the 4th row starts with Conway Tim for a purchase of 50 bucks
  • Sort the table by the first column
  • Assert that now the 4th row is from Smith John for again 50$

Now lets inspect the DOM itself for that table

image

It’s clear that we do not have too many ways to create a nice selector, besides that, given the above use case, what if instead of the 4th row we now want to check against the 2nd.

So the idea with the Index based actions is that you now get the opportunity to manipulate your idx via variables, vs having to create individual selectors for every variation.

Our Po for the given page now might look like

// Ranorex Webtestit Page Object File

package uitest.pageobjects;

import java.util.List;

import org.openqa.selenium.*;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.support.ui.*;

// Additional data: {"img":"screenshots/e8acea0e-a4bf-9777-ff9b-bd59abd9741d.png"}
public class DataTablePo {
    // Additional data:
    // {"img":"screenshots/7b8d85ce-3cfc-2ddd-4426-7f84a44259ba.png"}
    private By tableRows = By.cssSelector("#table1>tbody>tr");
    // Additional data:
    // {"img":"screenshots/c24cf10d-f793-ed69-7cdb-0d522262345b.png"}
    private By sortColumns = By.cssSelector("#table1>thead>tr>th");

    /*
     * NOTE: Use Ranorex Selocity or the Elements Panel to generate element code
     */

    protected WebDriver driver;
    protected WebDriverWait wait;

    public DataTablePo(WebDriver driver) {
        this.driver = driver;
        this.wait = new WebDriverWait(driver, 10);
    }

    public DataTablePo open(String url) {
        this.driver.get(url);

        return this;
    }

    public String getTitle() {
        return this.driver.getTitle();
    }

    /*
     * NOTE: Drag elements from the Elements panel into the code editor to generate
     * methods. Drag elements into existing methods to add steps.
     */
    public String getNthTableRowsText(int index) {
        this.wait.until(ExpectedConditions.visibilityOfElementLocated(this.tableRows));
        List<WebElement> tableRowsAllElements = driver.findElements(this.tableRows);

        WebElement tableRowsElementByIdx = tableRowsAllElements.get(index);
        String tableRowsText = tableRowsElementByIdx.getText();

        return tableRowsText;
    }

    public DataTablePo clickNthSortColumns(int index) {
        this.wait.until(ExpectedConditions.visibilityOfElementLocated(this.sortColumns));
        List<WebElement> sortColumnsAllElements = driver.findElements(this.sortColumns);

        WebElement sortColumnsElementByIdx = sortColumnsAllElements.get(index);
        sortColumnsElementByIdx.click();

        return this;
    }
}

As you can see we selected multi target selectors, which just went to the part of the TRs for the table itself and THs for the sort headers for #table1.

The test now may look like

// Ranorex Webtestit Test File

package uitest.tests;

import uitest.TestNgTestBase;
import uitest.pageobjects.*;

import org.openqa.selenium.WebDriver;
import org.testng.Assert;
import org.testng.annotations.Test;

class MyTest extends TestNgTestBase {
    @Test
    public void SampleTestCase() {
        WebDriver driver = getDriver();

        DataTablePo dataTablePo = new DataTablePo(driver);
        dataTablePo.open("https://the-internet.herokuapp.com/tables");

        String thirdRowBeforeSort = dataTablePo.getNthTableRowsText(3);

        // This should look like this:
        // Conway Tim [email protected] $50.00 http://www.timconway.com edit delete
        Assert.assertTrue(thirdRowBeforeSort.matches("Conway Tim.*\\$50.00.*"));

        // Sort by last name
        dataTablePo.clickNthSortColumns(0);

        String thirdRowAfterSort = dataTablePo.getNthTableRowsText(3);

        // This should look like this:
        // Smith John [email protected] $50.00 http://www.jsmith.com edit delete
        Assert.assertTrue(thirdRowAfterSort.matches("Smith John.*\\$50.00.*"));
    }
}

The assertion part is simply making use of a regex comparison to check the full rows textcontent.


#4

Thanks @vsoftic and @smatijas! This info was extremely useful :slight_smile:


closed #5