Home>

I'd like to test that a specific element is given a new class name by jQuery in RSpec's system spec, but it doesn't work. Could you give me some advice?

I created a form with Rails and made it possible to display the validation error with jQuery.

= form_with model: @user do | f |
  .last-name
    = f.label: last_name,'last name', id:'last_name-label'
    = f.text_field: last_name, id:'user-last_name'
    = f.label: first_name,'name', id:'first_name-label'
    = f.text_field: first_name, id:'user-first_name'
$('# user-last_name'). Blur (function () {
  if ($(this) .val () =='') {
    $(this) .prev ('label'). AddClass ('error-label');
    $(this) .addClass ('error-frame');
    $(this) .after (` Please enter `);
  } else {
    $(this) .prev ('label'). removeClass ('error-label');
    $(this) .removeClass ('error-frame');
    $(this) .next (). remove ('.error-message');
  };
});
.error-label {
  color: red;
}
.error-frame {
  border: solid 3px red;
}

Andsystem specsoaddClassI tried to test what was being done, but it didn't pass.

describe'name' do
  context'if empty' do
    context'when out of focus' do
      before do
        fill_in'user [last_name]', with:''
        find ('# user-first_name) .click
      end
      it {expect (find ('# last_name-label')). to have_css'.error-label'}
      it {expect (find ('# user-last_name')). to have_css'.error-frame'}
    end
  end
end


test results

Failure/Error: it {expect (find ('# last_name-label')). to have_css'.error-label'}
  expected to find css ".error-label" within #<Capybara :: Node :: Element tag = "label" path = "/ HTML/BODY [1]/DIV [1]/DIV [2]/DIV [2]/FORM [1]/DIV [1]/LABEL [1] ">but there were no matches
Failure/Error: it {expect (find ('# user-last_name')). to have_css'.error-frame'}
  expected to find css ".error-frame" within #<Capybara :: Node :: Element tag = "input" path = "/ HTML/BODY [1]/DIV [1]/DIV [2]/DIV [2]/FORM [1]/DIV [1]/INPUT [1] ">but there were no matches
What I tried
  • expect (find ('# last_name-label')). toIn ()pageWhen I tried it, the test passed.
it {expect (page)). to have_css'.error-label'}
  • When I checked the screenshot when the test failed, the class name was given and the label and form frame were firmly red.
  • have_cssTohave_selectorI tried, but the result was the same and did not pass.
it {expect (find ('# last_name-label')). to have_selector'.error-label'}
  • expect (find ('# last_name-label')). toIn ()find findToallI changed it to, but the test did not pass either.
it {expect (all ('# last_name-label')). to have_selector'.error-label'}
it {expect (all (: css,'# last_name-label')). to have_selector'.error-label'}
Failure/Error: it {expect (all (: css,'# last_name-label')). to have_selector'.error-label'}
  expected to find css ".error-label" but there were no matches
Failure/Error: it {expect (all ('# last_name-label')). to have_selector'.error-label'}
  expected to find css ".error-label" but there were no matches

find findOrallI thought that it would look for the element in (), but is it wrong in usage or way of thinking?

Supplementary information (FW/tool version, etc.)

rails (6.0.3.2)
ruby (2.7.1)
rspec-rails (4.0.1)
capybara (3.33.0)
selenium-webdriver (3.142.7)

  • Answer # 1

    solved.
    Module: Capybara :: Node :: Matchers
    Module: Capybara :: Node :: Finders
    With reference to

    it {expect (page) .to have_selector'# last_name-label', class:'error-label'}
    it {expect (page) .to have_selector'# user-last_name', class:'error-frame'}


    The test passed.

Related articles