How to handle React Selection component using Selenium IDE
I have a problem with the Selenium environment location item
This is the link: https://jedwatson.github.io/react-select/
I follow this command:
Command: sendKeys
Target: css=div.Select-control input
Value: Victoria${KEY_ENTER}
But I don't know how to handle the next field with the same element as this one
<div class="Select-placeholder">Select...</div>
The question is how to deal with the Selenium IDE?
source to share
When looking at your page, the reason you can't use css=div.Select-placeholder input
like you have with the first field is because the input is not a child of the placeholder element. You will need to use some xpath like this //div[@class='Select-placeholder']/..//input
which will find the element Select-placeholder
, navigate to the parent and then find the input. However, the problem is that there are several input fields that match this.
You can use: (//div[@class='Select-placeholder'])[1]/..//input
replace '1' for any object instance that is targeted, but if you can recommend changing the code of the page itself to make each input field uniquely identifiable (adding id tags for example), as that would make your automation less fragile and would probably fail if the order of those inputs needed to change / more were added, etc.
source to share
You can do it 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 select an item in Select by:
<tr>
<td>sendKeys</td>
<td>css=[id='your_id]> div > div > div > input</td>
<td>1${KEY_ENTER}</td>
</tr>
source to share
I can do the following:
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 commented out sleep for the thread, since I am running on local machine, it sometimes takes a while to fetch an item from the UI on remote computers, so in that case uncomment Thread.sleep
and try.
source to share
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 by moving your cursor to the first option.
source to share