Filling in text box with capybara

Question

I have a text box that I'm trying to fill in with Capybara. I've tried to play around with it and try to figure something's out but my tests don't pass.

Here's

It's for this specific text box:

<span class="ui-grid-header-cell-label ng-binding" ui-grid-one-bind-id-grid="col.uid + '-header-text'" id="14213131-uiGrid-0008-header-text">DOB</span>

<input type="text" class="ui-grid-filter-input ui-grid-filter-input-0 ng-touched" ng-model="colFilter.term" ng-attr-placeholder="{{colFilter.placeholder || ''}}" aria-label="Filter for column" placeholder="" aria-invalid="false" style="">

Here's the code I have.

find('ui-grid-filter-input ui-grid-filter-input-0 ng-touched').set('1414234')

Ideally I'm trying to find this specific text box and type something in.

undetected Selenium · Accepted Answer · 2022-03-24T20:58:53.890

0

To fill the <input> using Capybara you can use either of the following locator strategies:

find('[aria-label=Filter for column]').set('1414234')

or

find('input[aria-label=Filter for column]').set('1414234')

edited Mar 24 '22 at 20:58

answered Mar 24 '22 at 20:26

undetected Selenium

183,867
41
278
352

It's giving me element not found. – Rubyman543 Mar 24 '22 at 20:28
Checkout the second option. – undetected Selenium Mar 24 '22 at 20:29
Failure/Error: find('ui-grid-filter-input ui-grid-filter-input-0 ng-touched').set('123231') Capybara::ElementNotFound: Unable to find css "ui-grid-filter-input ui-grid-filter-input-0 ng-touched" – Rubyman543 Mar 24 '22 at 20:30
Tried both one and two – Rubyman543 Mar 24 '22 at 20:31
I just used Xpath for this. – Rubyman543 Mar 24 '22 at 20:58

score 0 · Answer 2 · answered Mar 25 '22 at 00:03

As a CSS selector 'ui-grid-filter-input ui-grid-filter-input-0 ng-touched' is looking for a ng-touched element which is a descendant of a ui-grid-filter-input-0 element which is a descendant of a ui-grid-filter-input element - which obviously isn't what you want. Since you're trying to match on classes you need to use the CSS class selector which starts with .

find('.ui-grid-filter-input.ui-grid-filter-input-0.ng-touched')

would be the correct way to do what you were doing, however you probably don't really need all those classes, and the more you specify the more brittle you are making your selectors. It's likely that just

find('.ui-grid-filter-input-0').set('1414234')

would do what you want - or better

find('.ui-grid-filter-input-0').fill_in(with: '1414234')

Filling in text box with capybara

2 Answers2