Press the Spin button located in the Protractor app

<hs-details-item ng-repeat="item in amenities" style="overflow:hidden" class="ng-scope">
            <hs-label class="ng-binding">Pepsi</hs-label>
            <hs-value-block>
                <hs>
                    <hs-spin ng-class="{'disabled': isAmenityPosting}" spin- ontrol="{changeCallback:setQuantity, value: item.quantity, min:0, params: item.amenity_id, title:'Quantity'}"><span class="disabled">-</span><span>+</span>
                        <!--<span hs-placeholder="0" localize="{data: item.quantity > 0 ? item.quantity:null, format: 'int', operation:'text'}"></span>-->
                        <span localize="{data: item.quantity, format: 'int', operation:'text'}">0</span>
                    </hs-spin>
                </hs>
            </hs-value-block>
        </hs-details-item>

Scenario: I need to click on a spin which is a “+” button that increments numbers every time it is clicked. Challenge: There are 10 spins for different items. How can I uniquely identify the code to click on the correct spin? While the names of the items (water, Pepsi,...) are unique, they do not correspond to the specific spins being clicked. Any suggestions on how this can be achieved using Protractor? The following snippet of code demonstrates how the number of Pepsi is incremented when the spin is clicked. However, selecting the element with the "'+'" button does not provide anything unique:

<hs-spin ng-class="{'disabled': isAmenityPosting}" spin-control="{changeCallback:setQuantity, value: item.quantity, min:0, params: item.amenity_id, title:'Quantity'}"><

Answer №1

To filter out the specific spin element you want based on its label, you can use the filter() method:

var targetLabel = "Mountain Dew";
var desiredSpin = element.all(by.repeater("item in amenities")).filter(function (spin) {
    return spin.element(by.tagName("hs-label")).getText().then(function (label) {
        return label === targetLabel;
    });
}).first();

desiredSpin.element(by.tagName("hs-spin")).click();

Alternatively, a less preferred approach in Protractor is to directly use an XPath expression to locate the element:

var desiredSpin = element(by.xpath("//hs-details-item[hs-label = 'Mountain Dew']//hs-spin"));
desiredSpin.click();

Answer №2

By tweaking alecxe's recommendation slightly, I successfully modified the code to make it functional and successfully click the "+" button:

element(by.xpath("//hs-details-item[hs-label='Coca-Cola']//hs-spin/span[2]")).click();

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

What potential drawbacks are there to dynamically loading website content?

With the increased speed of (V8)Chrome and (SpiderMonkey)Firefox's JS Dom traversals, is there any compelling reason not to dynamically fetch website content using JavaScript? I'm considering loading large files like images with JavaScript while ...

Ways to programmatically insert an iframe source using Angular

I am encountering an issue with dynamically embedding a YouTube video into an iframe, specifically an Error: $interpolate:interr Interpolation Error. Here is the HTML code: <div class="embed-responsive embed-responsive-16by9"> <iframe class= ...

JavaScript code snippet for detecting key presses of 3 specific arrow keys on the document

For this specific action, I must press and hold the left arrow key first, followed by the right arrow key, and then the up arrow key. However, it seems that the up arrow key is not being triggered as expected. It appears that there may be some limitations ...

Region Covered by Mouse Over Does Not Extend Across Whole Div

On my website, there is an arrow located on the middle right side that, when hovered over with the mouse, reveals a sidebar. Clicking on each icon in the sidebar further extends it to reveal more content. However, the issue I am facing is that the sidebar ...

When using Bablify with React and Electron, you may encounter the error: "Uncaught TypeError: fs.readFileSync is not

Every time I attempt to import Electron Components into my Render Process, I encounter an exception. Uncaught TypeError: fs.readFileSync is not a function Despite what I have researched, it seems like the issue persists with accessing the fs. It was sugg ...

Readiness of Ajax onreadystatechange function state

I have a script that fetches raw JSON data for an image from Flickr and displays it on the page. I want to provide real-time feedback using readyState during the process. Currently, my code checks if the readyState is 4 and the status is 200 before adding ...

Exploring Nested Divs with Vue Test Utils

Recently, I came across this shallowMounted vue component: <div class="card p-relative"> <div class="card-header"> <div class="card-title h4"> a lovely title <!----> <!----> </div> </div ...

Facing issues with Laravel errors preventing the implementation of CSS on my localhost

These are the tailwindcss errors I am encountering: npm WARN @tailwindcss/[email protected] requires a peer of tailwindcss@^1.0 but none is installed. You must install peer dependencies yourself. npm WARN @tailwindcss/[email protected] requi ...

Using Selenium for Web Scraping and attempting to rectify a parallelization error with ThreadPool approach

After spending time on Web Scraping for reviews websites and finding it exhausting to run the code, I realized that extracting 20k reviews takes at least a day. In order to address this issue, I started exploring new possibilities, with parallelizing task ...

Experiencing an overwhelming amount of outcomes while attempting to locate an element using Selenium WebDriver

After running the search query shown below: parts.get(i).findElements(By.xpath("//li[starts-with(@class, '_lessons--row-')]")) I received multiple results, yet when checking in Developer Tools, I could only find a maximum of three. parts.get(i ...

HTML - Automated Navigation to Anchor Links

My website features a search box and various options. While the mobile version displays these prominently on the start page, once a user performs a search, the result page also includes the search box and options at the top. To streamline the user experie ...

A guide on navigating through an array nested within an object

I have been diving into the world of ReactJS, experimenting with different APIs to fetch and manipulate data. Currently, I am working with the Flickr API which returns data structured as "An array inside an object". { "photos": { "page": 1, "page ...

Unable to clear the field as the clear() method is not functioning properly

I am unable to empty the field ('text1) in order to input a new text ('text2') self.driver.find_element_by_id('serviceName').click() self.driver.find_element_by_id('serviceName').clear() self.driver.find_element_by_id(&a ...

What command in PowerShell can be used to determine the version of chromedriver.exe?

While working on a PowerShell script to upgrade my webdrivers before running a selenium script, I encountered an issue. The command I was using to retrieve the version of msedgedriver.exe was successful, but when I tried the same command for chromedriver.e ...

Enable/Disable Text Editing Based on Vue Js Input

I’m working on a way to make certain parts of a string in an input editable or non-editable (readonly) depending on the context in Vue.js. For instance: I have this text: My Name is $John Doe$ Now, I want my Vue.js code to scan the string and allow edi ...

Struggling to locate an nz-select form element in Selenium while attempting to click on it?

I am currently facing a challenge with automating the input in a form on a website, specifically with selecting a dropdown option. The website in question is: immosuche.degewo.de/de/properties/W1400-40660-0750-0902.html You'll need to click on "Kon ...

Having trouble with sending a JSON post request in Flask?

I have a setup where I am utilizing React to send form data to a Flask backend in JSON format. Here is an example of the code: add_new_user(e){ e.preventDefault() var user_details = {} user_details['fname'] = this.state.first_name user_d ...

Express file response problems affecting React front-end communication

I am currently developing a basic questionnaire on a React full stack website that uses React, Express, and SQL. Right now, my main goal is to return an error message from React and have it displayed on the front end. This is the code for my express endp ...

Trouble setting YouTube URL with jQuery iframe

I need help with embedding a YouTube video using jQuery. Below is the HTML code I have: <iframe class="embed-responsive-item" id="placeYoutubeVideo" style="display:none" src="#" style="display:none" allowfullscreen></iframe> In my j ...

Opening a dialogue box upon clicking a table row

I have a table in HTML where I want a dialog box to appear when a row is clicked. To update my database, I am using an AJAX call like this: $(document).ready(function() { $('.myrow').click(function () { $("#dialog").dialog({ ...