Evers
Evers

Reputation: 223

Exact match in capybara

I'm having a problem with Capybara 2.1 to match exact text.

I have a select form looking like this one :

<select class='tags-select'>
  <option>Tag 1</options>
  <option>Tag 2</options>
</select>

My test should select Tag 2

page.find('.tags-select', :text => 'Tag 2').click

Otherwise that keeps selecting Tag 1 even with this Capybara config in my helper :

Capybara.configure do |config|
  config.match = :prefer_exact
  config.exact = true
  config.exact_options = true
  config.ignore_hidden_elements = true
  config.visible_text_only = true
  config.default_wait_time = 10
end

I know that I can use some regex here to avoid the problem, but I want to understand what I'm doing wrong with that test.

Upvotes: 3

Views: 2872

Answers (2)

Justin Ko
Justin Ko

Reputation: 46836

The main problem, based on the query.rb file, is that the :exact option does not apply to the :text option:

def matches_filters?(node)
  if options[:text]
    regexp = options[:text].is_a?(Regexp) ? options[:text] : Regexp.escape(options[:text].to_s)
    return false if not node.text(visible).match(regexp)
  end

So the finder:

page.click_link('id', :text => 'Password', :exact => true)

Will match both of the following elements

<a id="id" href="#">Password</a>

and

<a id="id" href="#">Password Other</a>

Your approach might also be failing because your find method is actually returning the select list rather than the option (ie I believe you are clicking the wrong element). The following will click the right option, however you would still have the exactness problem.

page.find('.tags-select option', :text => 'Tag 2').click

To address the exactness issue, you need to pass the text value to the finder without using the text option.

If you are just selecting an option, use the select method as DevDude mentioned:

page.find('.tags-select').select("Tag 2")

If you really need to do a click instead, you could do:

page.find('.tags-select').find(:option, 'Tag 2').click

Upvotes: 3

SomeDudeSomewhere
SomeDudeSomewhere

Reputation: 3940

The problem lies in the fact that you are using a text selector on an Element with multiple options. You should be using another specification for your selector that includes the option. Also, you should add a value for each option, as they are both equivalent (empty value). I would redo your work like this:

<select class='tags-select'>
  <option value="1">Tag 1</options>
  <option value="2">Tag 2</options>
</select>

And then try to select the option with this:

page.find('.tags-select').select("1")

Upvotes: 0

Related Questions