I have problem with Selenium IDE location element
This is the link : https://jedwatson.github.io/react-select/
I success with this command:
Command: sendKeys
Target: css=div.Select-control input
Value: Victoria${KEY_ENTER}
But I don't know to handle next field with same element like this
<div class="Select-placeholder">Select...</div>
The question is how to handle this with Selenium IDE?
I am able to do as follows:
Actions act = new Actions(driver);//driver variable is chrome web driver ref
WebElement selectInput=driver.findElement(By.className("Select-input"));//Thread.sleep(5000);
act.click(selectInput).build().perform();//Thread.sleep(5000);
//list of all option
List<WebElement> selectValues=driver.findElements(By.className("Select-option"));//Thread.sleep(5000);
//first option:
WebElement firstWebElement=selectValues.get(0);//Thread.sleep(5000);
act.click(firstWebElement).build().perform();//Thread.sleep(5000);
I have commented sleep for thread, as I am running on local, sometimes it takes time to fetch element from UI on remote machines, so in that case uncomment Thread.sleep and try.
Looking at your page, the reason you can't use css=div.Select-placeholder input like you have with the first field, is that the input is not a child of the placeholder element. You'd need to use some xpath like this //div[@class='Select-placeholder']/..//input which would find the Select-placeholder element, navigate up to the parent element and then find the input. However the issue there is, that there are multiple input fields which match this.
You could use: (//div[@class='Select-placeholder'])[1]/..//input replacing '1' for whichever instance of the element you are targeting, but if you can I would recommend amending the code of the page itself to make each input field uniquely identifiable (adding on id tags for example) as it would make your automation less brittle and likely to fail if the order of these inputs needed to change/more were added etc.
You can do like this
<span id='your_id'>
<Select
className='no_matter'
options={this.selectItems}
/>
</span>and find by selenium ide this way
<tr>
<td>waitForElementPresent</td>
<td>css=[id='your_id']> div > div > div > input</td>
<td></td>
</tr>and choose item in Select by:
<tr>
<td>sendKeys</td>
<td>css=[id='your_id]> div > div > div > input</td>
<td>1${KEY_ENTER}</td>
</tr>Using Python Selenium, I had the same problem to create a new option:
menu = selenium.find_element_by_css_selector(".Select")
(ActionChains(selenium)
.move_to_element(menu)
.click()
.send_keys('whatever new option,'))
.perform()
)
Try to do the same moving the cursor to the first option.
