Capybara/Poltergeist: CSS ID with a colon raises Capybara::Poltergeist::InvalidSelector

Question

I have a CSS selector with a colon in the name, which apparently is a problem.

Example:

selector = 'input#billing:street1'
find(selector)

I get the following error message:

The browser raised a syntax error while trying to evaluate the selector "input#billing:region_id" (Capybara::Poltergeist::InvalidSelector)

Is there any way to use the selector the way it is? I know that I could do something like that:

selector = 'billing:street1'
find(:xpath, ".//input[@id='#{selector}']")

but I'd prefer not to do it for various reasons.

I use Cucumber, Capybara, Poltergeist/PhantomJS

Answer 1

This is more of an educated guess based on my experience with CSS and Javascript, but you could try something like this:

selector = 'input#billing\:street1'
find(selector)

Notice the backslash in front of the colon, this escapes the character in CSS. For Javascript however, it is slightly different. You will need two slashes to escape the character. Like so:

selector = 'input#billing\\:street1'
find(selector)

I'm not sure which one would do the trick (if either would) since I have zero experience with Cucumber, Capybara, and Poltergeist/PhantomJS, but based on your code it looks as if you would want to try the double slash \\ option first.