Capybara checking HTML class and ID

Question

I'm currently trying to find this element and have capybara validate that it's there. There's an element that shows up and I'm using page.should have_css to see if this element is there.

<i class="ui-grid-icon-cancel" ui-grid-one-bind-aria-label="aria.removeFilter" aria-label="Remove Filter">&nbsp;</i>

I'm currently trying to get to the ui-grid-icon-cancel and validate that it's there. Here is the code I'm using to validate it.

page.should have_css('class#ui-grid-icon-cancel')

What else can I do to fix this.

I'm expecting to validate the CSS element using capybara.

Answer 1

Did you try page.should have_css('.ui-grid-icon-cancel') . When looking for a class element, you need to use the notation of a period rather then explicitly putting the word "class". `

Answer 2

You can use either of the following locator strategies:

• css_selector using value of class attribute:

  page.should have_css('i.ui-grid-icon-cancel')
                         ^ here dot denotes classname
  

• css_selector using value of aria-label attribute:

  page.should have_css('i[aria-label="Remove Filter"]')
  

Answer 3

All the other answers are correct about the needed CSS selectors, however if you're getting errors about should being undefined then you either haven't installed RSpec correctly or your project has the should syntax disabled - https://relishapp.com/rspec/rspec-expectations/docs/syntax-configuration. The should syntax is going to be disabled by default in RSpec 4, and any new code really shouldn't be using it at this point. Instead you should be using the expect syntax. Any of the following should work, assuming you have RSpec properly installed, depending on exactly what you're trying to verify

expect(page).to have_css('.ui-grid-icon-cancel')
expect(page).to have_css('i.ui-grid-icon-cancel')
expect(page).to have_css('i', class: 'ui-grid-icon-cancel')