Capybara / Poltergeist: CSS colon identifier calls Capybara :: Poltergeist :: InvalidSelector

Question

I have a CSS selector with a colon in the name, which seems to be the problem.

Example:

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

The following error message appears:

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

Is it possible to use the selector as it is? I know I can do something like this:

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

but I would prefer not to do this for various reasons.

I use Cucumber, Capybara, Poltergeist / PhantomJS

Answer 1

This is a more educated assumption based on my experience with CSS and Javascript, but you can try something like this:

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

Note the backslash before the colon; this eludes the character in CSS. However, for Javascript this is a little different. You need two slashes to escape the character. For instance:

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

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