Is there a way to click the Radio button of a Blueprintjs Radio Component when doing an automated test using CucumberJS and Selenium?

Question

I am doing automation testing using CucumberJS with Selenium Webdriver. I am trying to click on the radio button in a form using this piece of code :

try {
  let gender = driver.findElement(By.css("input[type=radio][value=Miss.]"))
  gender.click()
  driver.sleep(7000)
} catch (ex) {
  console.log(ex)
}

This is my React code using the Blueprint library :

<RadioGroup>
                  <Radio id="radio-gender-1" label="Mr." value="Mr." checked={this.state.title === "Mr."} />
                  <Radio id="radio-gender-2" label="Miss." value="Miss." checked={this.state.title === "Miss."} />
</RadioGroup>

But when I am running the test, it is throwing an error stating:

UnhandledPromiseRejectionWarning: InvalidSelectorError: invalid selector: An invalid or illegal selector was specified.

I can fill up the text boxes in the form but not able to click on the radio button.

Can you please help me with this?

score 1 · Answer 1 · answered Mar 28 '19 at 13:08

1

You didn't put quotes around the attribute values in your CSS selector. It should be

input[type='radio'][value='Miss.']

But you have an ID so I'm not sure why you aren't using it instead

By.id("radio-gender-2")

answered Mar 28 '19 at 13:08

JeffC

22,180
5
32
55

I had tried doing it by using By.id() but it was throwing an error. After trying your suggestion, it still trows an error " Element is not clickable at p oint (382, 325). Other element would receive the click: `" – Megha Verma Mar 28 '19 at 13:23
That means that there is a `SPAN`, indicated in the error message, that is blocking the click. Update the HTML you posted to include not only the `INPUT`s that you already have but also the `SPAN` that the error message is talking about. Looks like you need to click the right `SPAN`. – JeffC Mar 28 '19 at 14:53
I am using the Radio component from BlueprintJS library. The SPAN is visible in the debug mode, the HTML code is exactly what I have given here. And I had tried clicking on the SPAN but its not working. – Megha Verma Mar 29 '19 at 05:16
I can't help you if you won't post more HTML. Add the `SPAN` that is referenced in the error and include the `INPUT` that you are trying to click. – JeffC Mar 29 '19 at 05:55

score 0 · Answer 2 · answered Sep 11 '19 at 11:18

BlueprintJS seems to add an overlay to the radio buttons to style them. This results in Selenium not being able to click the Radio button properly.

The solution I found is to click the actual overlay rather than the input, to do so I used this selector:

# By.css("#inputId + .bp3-control-indicator")

Is there a way to click the Radio button of a Blueprintjs Radio Component when doing an automated test using CucumberJS and Selenium?

2 Answers2