Press the designated button within the table

Currently, I am utilizing Webdriverio, Selenium, and JavaScript for my project.

Within my frontend design, there are three div elements, each housing a table with the same classname (field_table). These divs are identified by the ids 0, 1, and 2, all sharing the classname receiver_field.

Each table within these divs features a button with an identical classname (delete-button).

This setup is due to the automated generation of these tables.

While performing testing in Webdriverio Selenium test, I face a challenge when trying to click one of the three buttons to delete an entry. The issue arises from all buttons having the same classnames.

I attempted to navigate through their ids but encountered difficulties in making it work.

    it('should be possible to delete on button click', function () {

    // Get receiver fields
    var fields = browser.elements('.form-control-list');
    expect(fields.value.length).to.equal(6);

    // Get only one table
    // Obtain the button within that specific table
    // Click on the button

    //expect(fields.value.length).to.equal(4);

});

Does anyone have any suggestions or solutions to this predicament?

Answer №1

To gather elements sharing the same class name, it is necessary to compile them into a list or array and then pinpoint the specific element for interaction.

For example:

let elems = document.getElementsByClassName("class_name");

elems[0].click();

If you could demonstrate how this works in JavaScript, I would greatly appreciate it! :)

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

Unable to change the color of the RaisedButton component in Material-UI

Struggling to alter the color of the material-ui RaisedButton with inline style customization using backgroundColor: '#fb933c', yet it continues to display the default color. ...

Show a brief glimpse of the JS/jQuery object on the screen

Exploring JavaScript objects today and encountered an unusual glitch. <form method="get" action="" name="start" > <fieldset> <label for="date">Date</label> <input type="date" name="date" id="date" /> <div>&nbsp; ...

How can I write a JavaScript function that eliminates all white spaces within a string?

Exploring ways to create a custom function that trims white spaces from the beginning and end of a string (including \n, \t) without relying on built-in methods like trim(), replace(), split(), or join() Here’s an example code snippet showcasi ...

Sort through an array using criteria from another array

const items = [[{name:"p2"},{name:"p3"}, {name:"p7"},{name:"p9"},{name:"p1"}],[{name:"p6"}, {name:"p3"},{name:"p7"}, {name:"p9"},{name:"p2"}],[{name:"p ...

When the disk space is insufficient, the createWriteStream function will not trigger an error event if the file is not completely written

One challenge I'm encountering involves using createWriteStream: Imagine I have a large 100mb file that I want to write to another file on the disk. The available space on the disk is only 50mb. Here's my code snippet: const fs = require(&a ...

Automate web browsing tasks by locating and interacting with iframes using the last-click method

After attempting to use the event last.click(), no errors were generated but the event did not run (is_element_present_by_xpatch return true). from splinter import Browser import time from time import sleep import unicodedata from unicodedata import norm ...

Encountering a UnreachableBrowserException error message in a SoapUI Groovy TestStep: "Unable to initiate a new session with Selenium."

My current setup includes SoapUI Pro 5.1.2 running on Windows 7 x32, attempting to establish a connection with Selenium Webdriver using Groovy TestStep. To enable this connection, I have included selenium-standalone-server.jar v2.45.0 in the $SOAP_HOME$&b ...

Using the select method in JavaScript arrays

Are the functionalities of JavaScript and Ruby similar? array.select {|x| x > 3} Could it be done like this instead: array.select(function(x) { if (x > 3) return true}) ...

The issue of jQuery file upload not functioning on every row of an ASP.NET repeater

Incorporating a jQuery file upload button in each repeater row has resulted in a display issue where only the selected files for the first row are shown. For subsequent rows, only the total count of selected files is displayed without the progress bar sh ...

Adjusting the appearance of a heading through CSS upon being clicked

My goal is to create a feature that highlights the border of a selected box in a different color. I attempted to achieve this by using classes in the TypeScript file and utilizing document.getElementById within the selectFlight method, which is called in t ...

Utilizing JADE in conjunction with ng-class

I'm having trouble getting this expression to work properly in my JADE nav-bar. It looks correct to me. li(ng-class="{'active' : true}"): a(href='#') INFO SHEET What am I missing here? The class doesn't get applied as expect ...

Stack required: \ Error, this is a new one to me

throw err; ^ Error: The module './C:\Users\domri\OneDrive\Desktop\Repositories\Discord Bot\commands\test/ping.js' cannot be located The error seems to be originating from this section of the code const ...

Manipulating objects with ease in JavaScript

function abc(req, res, next) { let imageName = req.body.name; const obj = { imageName: { status: true, url: "abc" } } In the function above, there is a variable named 'imageName'. The goal is to use the value obtained i ...

Choose one checkbox after all checkboxes have been chosen

Seeking assistance with a logical issue involving displaying data fetched in a while loop using PHP, as shown below: if (mysql_num_rows($results) != 0) { // displaying records. while ($row = mysql_fetch_array($results)) { echo &apo ...

Is it a good idea to integrate TypeScript with JavaScript before uploading to the server?

Our team has been exclusively using nodejs and writing code in vanilla JavaScript with a .js extension. While everything was running smoothly, we've recently made the decision to switch to TypeScript for our nodejs app development. However, we are fac ...

Can studying Titanium Appcelerator enhance my comprehension of NodeJS?

As I dive into the world of building mobile JavaScript Applications in Titanium Appcelerator, I've come across documentation that mentions the use of the V8 Engine as their JS interpreter for Android. Additionally, some of the approaches seem to be in ...

Learn how to easily upload multiple files from various upload points onto a single page using Node.js and express-fileupload

After searching on various platforms, including StackOverflow, I couldn't find a solution that fits my specific scenario. I've been struggling for hours to resolve this issue... In my handlebars page, there is an option for the user to upload fi ...

Troubleshooting React-Redux: Button click not triggering action dispatch

I am facing an issue where my action is not being dispatched on button click. I have checked all the relevant files including action, reducer, root reducer, configStore, Index, and Component to find the problem. If anyone can help me troubleshoot why my a ...

Access the file and execute JavaScript code concurrently

Can I simultaneously link to a file as noticias.php and call a JavaScript function? <a href="javascript:toggleDiv('novidades');" class="linktriangulo"></a> The toggleDiv function in my noticias.php file: function toggleDiv(divId) { ...

Retrieve the current row by clicking the button

I've been struggling to retrieve a specific value from a row displayed on my PHP webpage. My objective is to obtain the current value from a particular cell in the row, but using getElementsByTagName has not been successful as it only returns an HTMLC ...