Navigating through choices in select element using webdriverio

Question

Navigating through choices in select element using webdriverio

Sample HTML:

<select id="random_text">
    <option value="option1">asadka_TEST</option>
    <option value="option2">Peter Parker</option>
    <option value="option3">Clark Kent</option>
    <option value="option4">aldkfsd_TEST</option>
</select>

Javascript code within the class

class TestPage extends Page {

    get fullNameSelect() {return browser.element('#random_text');}

    iterateAndSelect() {
        this.fullNameSelect.value.ForEach() //pseudo code
    }
}

I am trying to make iterateAndSelect function go through all options and choose the first one that ends with "_TEST".

Currently, I have only managed to discover the selectByVisibleText action, but the issue is that I want to select an option based on a condition that the value ends with "_TEST" string, while this action requires providing the exact value.

javascript loops selenium foreach webdriver-io

Answer 1

Answer №1

To easily locate the initial option that finishes with _TEST, you can follow these steps:

const index = browser.getElements('option').findIndex(option => {
    return option.getText().endsWith('_TEST')
});

After finding the index, proceed to select the corresponding value:

browser.getElement('select').selectByIndex(index);

Answer 2

To easily locate the initial option that finishes with _TEST, you can follow these steps:

const index = browser.getElements('option').findIndex(option => {
    return option.getText().endsWith('_TEST')
});

After finding the index, proceed to select the corresponding value:

browser.getElement('select').selectByIndex(index);

Answer 3

Answer №2

Here is a straightforward method to accomplish this task.

// retrieve all options
const choices = document.getElementById('random_text').children
// identify test options
const tests = Object.keys(choices).filter( index => choices[index].text.indexOf('_TEST') > 0)
// execute tests
tests.map(index => {
  console.log(choices[index].text)
})

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <select id="random_text">
    <option value="option1">asadka_TEST</option>
    <option value="option2">Peter Parker</option>
    <option value="option3">Clark Kent</option>
    <option value="option4">aldkfsd_TEST</option>
  </select>
</body>
</html>

Answer 4

Here is a straightforward method to accomplish this task.

// retrieve all options
const choices = document.getElementById('random_text').children
// identify test options
const tests = Object.keys(choices).filter( index => choices[index].text.indexOf('_TEST') > 0)
// execute tests
tests.map(index => {
  console.log(choices[index].text)
})

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <select id="random_text">
    <option value="option1">asadka_TEST</option>
    <option value="option2">Peter Parker</option>
    <option value="option3">Clark Kent</option>
    <option value="option4">aldkfsd_TEST</option>
  </select>
</body>
</html>

Answer 5

Answer №3

Check out this snippet of Webdriverio code for you to test:

class SamplePage extends Page {

  get optionElements() {return browser.elements("option");}

  iterateAndFilter() {
       var filteredOptions=[];

     this.optionElements.value.forEach(function(element) {

     var text=browser.elementIdText(element.ELEMENT).value;
     if(text.endsWith('_FILTER')) {
        filteredOptions.push(text); 
     }
     console.log(filteredOptions); // all texts that end with _FILTER
    });
 }
   }
module.exports = new SamplePage();

Answer 6

Check out this snippet of Webdriverio code for you to test:

class SamplePage extends Page {

  get optionElements() {return browser.elements("option");}

  iterateAndFilter() {
       var filteredOptions=[];

     this.optionElements.value.forEach(function(element) {

     var text=browser.elementIdText(element.ELEMENT).value;
     if(text.endsWith('_FILTER')) {
        filteredOptions.push(text); 
     }
     console.log(filteredOptions); // all texts that end with _FILTER
    });
 }
   }
module.exports = new SamplePage();

Navigating through choices in select element using webdriverio

Answer №1

Answer №2

Answer №3

Similar questions

Sorting an array of numbers using Javascript

Encountering the AngularJS .Net Core routing $injector:modulerr error

Is there a way to use a POST request and Mongoose in Express to add a new object?

Cross-component communication in Angular

Tips for quietly printing a PDF document in reactjs?

The requested style from ' was denied due to its MIME type ('text/html') not being compatible with supported stylesheet MIME types, and strict MIME checking is enforced

What steps can be taken to further personalize this pre-existing jQuery sorting solution?

What is the best way for me to determine the average number of likes on a post?

Image carousel with variable height

JavaScript: a single function and two calls to Document.getElementById() results in both returning "undefined"

The Next.js API endpoint is struggling to process cross-domain POST requests

Featuring data utilizing Ajax JSON in CodeIgniter

Element that emulates a different element in HTML

Issues with Ajax Requests

How can one verify the text displayed on a button using Java with WebDriver?

Using JavaScript, create a regular expression with variables that can be used to identify and match a specific section of

Optimizing jQuery Dialog for Different Window Sizes

Sketch a line extending from one element to the next

Google Chrome is unable to process Jquery JSON .each() function

Error encountered: Unable to access undefined properties while attempting to make an API call to AirTable using NextJS version 13.4