having trouble with clicking and choosing an option from a drop-down menu within a pop-up while using protractor.js

I am working with protractor.js and successfully logging in to my application. However, I encounter a pop-up immediately after login where I need to select a value from a dropdown menu. Despite trying different methods with protractor.js, I have not been able to accomplish this task. The code snippet that I am struggling with is provided below.

describe('angularjs homepage todo list', function() {
  it('should add a todo', function() {
      browser.ignoreSynchronization = true;
    browser.get('https://sample.com');

    //browser.waitForAngular();
    //browser.sleep(10000);
     browser.pause();
    element(by.id('userId')).sendKeys('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d7772757364336e78716b7c6f7c775d69786e69337e7270">[email protected]</a>');
    browser.manage().timeouts().pageLoadTimeout(5000);
    element(by.id('password')).sendKeys('*********');
    browser.manage().timeouts().pageLoadTimeout(5000);
    **element(by.className('id-login-button wk-button-primary wk-button-full')).click();**
    //browser.manage().timeouts().pageLoadTimeout(5000);
     //browser.ignoreSynchronization = false;
     browser.sleep(20000);
    browser.switchTo().defaultContent();

     browser.wait( done => {  
     return element(by.model('productSelectionCtrl.selectedProduct')).isPresent();
     })
     .then(()=>{
     element(by.model('productSelectionCtrl.selectedProduct')).click();
     element(by.cssContainingText('option', 'Master Suite')).click();
     browser.sleep(20000);

     done;
     });

  });
});

The issue arises once the script reaches the highlighted line. From there onwards, I attempt to click on a specific class within the pop-up window and select the "Master suite" option from a dropdown menu which is associated with ng-model(productSelectionCtrl.selectedProduct). Unfortunately, this action is not being performed as intended. Any assistance in resolving this would be greatly appreciated.

Despite attempting [(browser.ignoreSynchronization = false;)] since the initial page utilizes Angular, my efforts have not yielded successful results. I suspect that the problem may lie with the wait or timeout functions. Below is the error message displayed in the console:

Failures:
1) angularjs homepage todo list should add a todo
  Message:
    Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
  Stack:
    Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
        at tryOnTimeout (timers.js:232:11)
        at Timer.listOnTimeout (timers.js:202:5)

1 spec, 1 failure
Finished in 36.928 seconds

[18:20:14] I/launcher - 0 instance(s) of WebDriver still running
[18:20:14] I/launcher - chrome #01 failed 1 test(s)
[18:20:14] I/launcher - overall: 1 failed spec(s)
[18:20:14] E/launcher - Process exited with error code 1

Answer №1

When using the by.className method, it is important to note that it only accepts a single class name. If you need to target multiple classes, you can achieve this by using a CSS selector instead:

$('.id-login-button.wk-button-primary.wk-button-full').click();

It is worth mentioning that employing ESLint in combination with the eslint-plugin-protractor plugin could help catch such errors at an earlier stage - particularly through the use of the no-compound-classes rule.

Furthermore, it is advisable to steer clear of using browser.sleep(), opting instead for browser.wait() along with the predefined Expected Conditions.

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

Show two columns horizontally using JavaScript

Hey, I'm working on a project where I need to display data from an array in an HTML output table. However, I'm facing an issue with displaying the table on the same page after clicking the submit button. Using document.write redirects me to anoth ...

What is the best way to display a loading animation until the entire wizard has finished loading in the jQuery-steps

I need help with implementing a loading animation using the jQuery-steps plugin in my wizard type form. I want the animation to be displayed until the entire wizard has loaded completely, but I'm unsure of how to enable this feature as there is a labe ...

Steps to access the Link URL when the class name transforms to display as block:

I'm currently working on a function that needs to trigger a click on a link only if a specific classname is set to display: block; Unfortunately, my coding skills are not advanced enough to accomplish this task. Here is what I have so far: https://j ...

Material UI does not support the inline attribute for applying CSS properties

Trying to adjust the CSS for Material-UI When setting the width, everything works fine. However, when attempting to set display inline, an error occurs ---> "inline is not defined" Can anyone provide guidance on how to resolve this issue? Sharing my cod ...

The choice between using inline style objects with React or utilizing traditional CSS classes presents distinct advantages and

Is there a discernible difference between utilizing an inline style object for react components and using a normal CSS class through the className attribute? Even when wanting to modify styles based on a specific event, simply changing the className should ...

using VueJS, learn how to dynamically apply text to a data variable based on certain props

I'm facing an issue with conditional value assignment to the data variable based on props. The ternary operator is causing errors in my code. Here's a snippet for reference: <template> <div class="absolute left-3 top-1/2"> ...

The React app I've been working on has a tendency to unexpectedly crash when reloading the code from time

Dealing with a frustrating issue here. I've been working on an app and for the past few weeks, it keeps crashing unexpectedly. It seems to happen more frequently after saving my code to trigger a reload, but it can also just crash randomly while navig ...

Toggle div visibility with a click

Hello, I've created a mailbox with show/hide functionality on :hover. However, someone recently mentioned that this could be quite distracting for users. Since pure CSS doesn't allow me to achieve the same effect on :active, I'm wondering if ...

Highcharts introduces a new feature with the addition of three buttons in the Legend: Hide, Remove,

I'm looking to enhance the Legend by adding 3 buttons: Hide, Remove, and Settings. The Hide button should hide the series/indicator upon click event, The Remove button should remove (not just hide) the series/indicator upon click event, The Settings ...

Encode JavaScript field without affecting the appearance

I need to encode a specific search field before submitting it as a $_GET request. To do this, I am using the encodeURIComponent() function on that field before the form is submitted. $('#frmMainSearch').submit(function() { var field = $(this ...

What is the best way to change the order of rows and columns in

Is there a way to rotate a table using jQuery? Maybe with a function or some other method? For instance, if I have a table structured like this: <table> <tr> <th></th> <th></th> <th>&l ...

Secure login using bcrypt encryption and SQLite3 database authentication

Currently, I am in the process of developing a React application that utilizes a Nodejs/Express Backend and I am working on implementing a Login Authentication feature. When registering users, I collect their Name, email, and password and then hash the pa ...

Displaying the quantity of directories within a specific location

Can anyone help me troubleshoot my code? I'm trying to have a message displayed in the console when the bot is activated, showing the number of servers it is currently in. const serversFolders = readdirSync(dirServers) const serversCount = parseInt(s ...

Extracting information from a dynamic webpage using Selenium and jSoup technology

Recently, I have been inquiring about a method to gather all the matches from a specific webpage but have not yet found a suitable solution. My goal is to extract information such as time, home team, and away team from which loads its content dynamically ...

JavaScript issue: Submitting form does not trigger the associated function

I am currently in the process of learning JavaScript as part of my university course, and I have encountered an issue where my function is not being called. I am seeking to gain a better understanding of why this problem is occurring. Summary The situati ...

Well, it appears that I am having trouble establishing a connection between the users in this chatting application

I'm encountering a problem with establishing a connection between two users. I have already installed express and socket.io, but for some reason, the message is not getting through to the receiver's end. The code seems to be running fine as I can ...

Parsing JSON strings that contain apostrophes (single quotes)

Can you assist me in decoding the given string? var a = JSON.parse('[' + '{"NoteName":"it's my life","UserId":"100","NoteActive":true,"UserEmail":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87e6e3eaeee9 ...

Tips for transitioning this JavaScript code into jQuery syntax

Below is my JavaScript code: javascript: function executeCode() { var d = document; try { if (!d.body) throw (0); window.location = 'http://www.example.com/code?u=' + encodeURIComponent(d.location.href); } catch (e) { ...

Searching in MongoDB: Retrieving a specified number of results with a specific field filter

Currently using MongoDB and in need of assistance with making a query. Specifically, I would like to perform a search on my user collection that includes a field named "country". For example: { "name" : "John", "country" : "FR" } For instance, I ...

Automatically adjust zoom on focused object within a D3 force layout

I have implemented an autocomplete feature in my force directed graph to highlight selected nodes by coloring them red. Now, I am looking to implement a "zoom" functionality where the window magnifies to 400% the size of the selected node and centers it wi ...