Finding and entering text in CapyBara

Question

I'm currently trying to find this specific textbook and send keys to it. The problem that I'm having is I'm trying to use the find method. I tried a lot of variations on this textbox and was unable to find this textbook.

HTML TAG:

<div class="selectize-input items not-full ng-valid has-options ng-dirty"><input type="text" autocomplete="off" tabindex="0" style="width: 187.033px; opacity: 1; position: relative; left: 0px;" placeholder="Type a Catname or Kob name"></div>

Here's what I'm trying to do

find('selectize-input items not-full ng-valid has-options').sendkeys 'Meow'

Would there be an easy of doing this without using xpath if possible. Also how would I enter via send keys.

Answer 1

fill_in uses Capybaras :fillable_field selector which finds elements by id, name, placeholder, or associated label text. Therfore the easiest way of entering text in that field is to just do

fill_in('Type a Catname or Kob name', with: 'Meow')

Beyond that, you've recently posted a number of questions where you are mixing up CSS selectors. I think you would really benefit from using https://flukeout.github.io/ to learn and understand CSS selectors. You are mixing up element type selectors, class selectors, etc. If you really want to do it via class names of the parent element you could do something like

find('.selectize-input.items.not-full.ng-valid.has-options.ng-dirty input').send_keys('Meow')

but that's really a terrible, brittle way to do it. Notice in the CSS selector the .s in front of class names, space between parent and descendant selectors, no . in front of the element type selector, etc