0

I want to select an item from the drop down list using nightwatch. i am able to get the item till my if condition. it also prints the value. but when i click on the item using elementIdClick , it returns {"status":-1,"state":"","value":{"message":"element click intercepted:

     await browser.elements('css selector','#profile-container .col-md-6 .pd-dropdown-wrapper ul li', async function (res) {
     await res.value.forEach(async function (jsonWebElement) {
         let jsonWebElementId = jsonWebElement.ELEMENT;
         await browser.elementIdText(jsonWebElementId, async function (jsonElement) {
             let text = jsonElement.value;
             console.log('text++++',text)
             if(text == 'Last 30 Days'){
              console.log('text^^^^^',text)
              await browser.elementIdClick(jsonWebElement.ELEMENT);
             }
         });
        });
     });
steve
  • 49
  • 10
  • You try this: https://stackoverflow.com/questions/27466980/nightwatch-cannot-find-click-on-dropdown-option – mattgreen Jan 23 '20 at 23:01
  • I tried this `browser.execute('document.querySelector("#transaction-container .col-md-6 .pd-dropdown-wrapper ul li a").options[2].selected=true')` . It didn't select the option from drop down. It also did not throw any error message. – steve Jan 24 '20 at 03:04
  • Here is a working example: https://codepen.io/mattgreen/pen/gObExaa You should be able to visit the page in chrome, and open devtools to experiment with this (javascript on the console). Ensure your selector is correct. – mattgreen Jan 25 '20 at 01:25
  • any idea guys ?, i believe i am nearly there but i couldn't select the value from drop down list in the if condition. but in the 'console.log' i can see the filtered value. – steve Jan 26 '20 at 05:22

1 Answers1

0

This works on a standard select list using Nightwatch 1.3.2

 browser
    .url('http://icreatehtml.co.uk/select.html')
    .waitForElementVisible('#pet-select')
     // Open the select list
    .click('#pet-select') 
    // Set the value using the visible text
    .click('xpath', `//select[@id='pet-select']//option[contains(text(),'Hamster')]`)
    // Close select list
    .click('body')
    .pause(3*1000)
    // Open the select list
    .click('#pet-select')
    // Set the value using the option value
    .click('#pet-select option[value="cat"]')
    // Close select list
    .click('body')
    .pause(3*1000)
    // Open the select list
    .click('#pet-select')
    // Set the value using a pseudo selector
    .click('#pet-select option:last-child')
    // Close select list
    .click('body')
    .end();
John Garlinge
  • 1
  • I do not have issue in selecting a value if the drop-down has `option` tag on it. When the drop down has `ul li` tag then it looks hard to select a value. normal strategies are not working. e.g ` – steve Jan 25 '20 at 22:24
  • My answer is valid for for both select and lists generated by JS libraries. The first action needs to open the list, the second clicks on the require value. Instead – John Garlinge Jan 26 '20 at 19:37
  • If you do not have an attribute to identify what you want to select then the only option is to use xpath. browser .waitForElementVisible('[Selector of element that opens the list]') // Open the select list .click('[Selector of element that opens the list]') // Set the value using the visible text .click('xpath', `//ul[@id='pet-select']//li//a[contains(text(),'All Countries')]`) – John Garlinge Jan 26 '20 at 19:46
  • The answer i am looking for is to create a customized command to select a value from list box. so that i can use that command where ever its possible. currently i am able to achieve by clicking on the main list box and another click on the value by passing css. The solution i am looking for is a customized command by passing the text value i want to select. – steve Jan 29 '20 at 23:30