Test the functionality of clicking on buttons in a specific order within a given set

I need assistance with a unique task involving a series of buttons in my Intern functional test. Each button needs to be tested sequentially, but I'm not sure how to go about it. In my code snippet below, you can see the structure of my page:

<input type="button" text="Button 1" class="myBtn">    
<input type="button" text="Button 2" class="myBtn">    
<input type="button" text="Button 3" class="myBtn">    

Here is the current approach in my test script:

return remote
    .findAllByClassName('myBtn')
        .then(function(btns) {
            var btn1 = btns[0];
            return btn1;
        })
        .click()
        .end()
        .then(function(btns) {
            var btn2 = btns[1];
            return btn2;
        })
        .click()
        .end()
        .then(function(btns) {
            var btn3 = btns[2];
            return btn3;
        })
        .click()
        .end()
    .end()

I am seeking guidance on the correct method for executing this iterative test using Intern.

Answer №1

To automate the process of clicking on each button sequentially, you can employ a simple recursive function in your code:

return remote
  .findAllByClassName('myBtn')
  .then(function (buttons) {
    var index = -1;

    function clickButton() {
      var currentButton = buttons[++index];
      return currentButton ? currentButton.click().then(clickButton) : null;
    }

    return clickButton();
  })
  .end();

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

Interactive website featuring 3DSMax .obj and .max models with advanced AJAX clickable functionalities

I have a 3DSMax model in both .obj and .max file formats. This model includes clickable points that work perfectly within 3DSMax, displaying details when clicked. My goal is to showcase this interactive model on the web with all its clickable features int ...

Ways to close IEDriverServer.exe console window following the execution of an InternetExplorerDriver Selenium test

I am currently using Selenium Webdriver with Visual Studio Unit Test and the InternetExplorerDriver. When I run the test, it opens up the IEDriverServer.exe in a command window. While the test executes successfully, I am faced with the issue of having to ...

Some browsers are experiencing issues with Javascript functionality

My JavaScript code is functioning perfectly on my development machine in Chrome, Firefox, and Safari. However, when others test it on their browsers, the value update does not work at all. Can anyone suggest how I can replicate this issue locally? Browser ...

Tips for handling the final row of a CSV file in Node.js with fast-csv before the 'end' event is triggered

After using fast-csv npm, I noticed that in the code provided below, it processes the last row (3rd row) of CSV data only after triggering the "end" event. How can this issue be resolved? ORIGINAL OUTPUT : here processing request here processing re ...

"Creating multiple circles on an HTML5 canvas using an iPad: A step-by-step guide

My current code is only drawing one circle at a time on an iPad view, but I want to be able to draw multiple circles simultaneously. How can I achieve this? // Setting up touch events for drawing circles var canvas = document.getElementById('pain ...

What method can we use to verify if an object falls within a specified date range when filtering?

Looking to determine if the current filter object falls within a specific date range and return a boolean value based on that condition. However, the code provided always returns the data. Can anyone spot the error in the implementation or suggest a better ...

Using Angular $resource to store an object with arrays

Consider a scenario where we have a User $resource structured as follows: $scope.user = { name: 'John', hobbies: [1, 2, 3] } If we were to save User.save($scope.user) to the server, it would send the following parameters: name: 'John& ...

A guide on showcasing images retrieved from Azure Blob Storage using React

Initially, I have thoroughly checked this question and can confirm that it is not a duplicate of How to display an image saved as blob in React Although I am unsure of their approach, our code is distinct and unrelated. My process involves following the ...

What is the method to select a hyperlink that includes a variable in the "href" attribute and click on it?

Currently, I am in the process of creating acceptance tests utilizing Selenium and WebdriverIO. However, I have encountered a problem where I am unable to successfully click on a specific link. client.click('a[href=#admin/'+ transactionId + &apo ...

Using JavaScript: How to utilize Array.reduce within a function that also accepts arguments

let foo = 0; let bar = 0; const arr1 = [1, 2, 3, 4, 5]; const arr2 = [6, 7, 8, 9, 10]; function calculateSum(arr) { return arr.reduce((accum, val) => accum + val, 0); } foo = calculateSum(arr1); // Expect foo to equal 15 bar = calculateSum(arr2); ...

Updating an array nested within an item of my state array using Angular 2 ngrx

Within my reducer function, I am looking to include an element that is nested within an array, following this JSON structure received via http services: JSON structure: { "id": "09fabf9a-e532-4d2a-87cc-bd949a0a437f", "title" ...

Collecting data from Jitsi

After setting up a Jitsi server using packages, I am now trying to log connection statistics to a database. Specifically, I want to store data about significant bitrate changes during video calls. Although I have some familiarity with JavaScript and WebRT ...

Switching between height: 0 and height:auto dynamically with the power of JavaScript and VueJS

Currently, I am changing the height of a container from 0px to auto. Since I do not know the exact final height needed for the container, using max-height could be an option but I prefer this method. The transition from 0 to auto works smoothly, however, ...

Confirming the validity of an email address with Md-chips

Email Validation for MD-Chips Struggling with creating an email validation for md-chips. The current expression I'm using is not working as expected, since the ng-keypress directive is triggered every time I type something. Any suggestions on how to ...

Importing various libraries in C# based on specific requirements

Currently, I am working on creating a unit test in Selenium using Nunit. During the development of this unit test, I have come across multiple libraries that house various language translations for all the options available. Each library contains a class ...

When refreshing a JavaScript array of objects, it creates duplicate entries within the array

Currently, I am developing a chat application within a Vue project and experimenting with different features. A fully-featured chat app must have the ability to live-update "seen" states. This means that when one user views the last sent message, the othe ...

How can I implement draggable and resizable <div> elements to create resizable columns in an antd table using React?

I am currently utilizing the Reacts Antd library to showcase the contents of my table. I am interested in implementing a feature that allows me to resize the column widths. To achieve this, I have wrapped the column in my element as depicted below. The dr ...

Why should design patterns be implemented in javascript?

I recently delved into the world of Design patterns and stumbled upon the Module Design pattern in JavaScript. This pattern offers object-oriented features like private and public variables in JavaScript. However, I found myself questioning the need to d ...

Unable to choose an item from a table using the "editable-checkbox" option

Seeking assistance with the following situation: I am trying to access a table, locate the row where the status is 'GOO', and then activate the editing of this row by clicking on a button. After that, I need to click on a checkbox in the last co ...

How can I code in React to make one button change color while the others remain a different color, instead of all having the same color?

I developed a quiz application that changes the color of answer buttons based on user selection. If the user clicks the correct answer button, it turns green, and if they click the wrong answer, it turns red with the correct answer displayed in green. Howe ...