Capybara: How to fill a textarea without an 'id'? - ruby

I am in need to fill_in a textarea which does not have an id. Following the inspection:
<textarea class="stock-description-input js-short-description-textarea" placeholder="Select a product or enter a description" maxlength="64"></textarea>
Have you got an idea how to do it?

There are different location techniques and ways to get to the desired element. stock-description-input class looks like a good thing to rely on. Use send_keys() to fill the area:
text_area = first(:css, 'textarea.stock-description-input').native
text_area.send_keys('Test')

Related

Filling in text box with capybara

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.
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')
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')

How to fill timepicker field with capybara

I am new to capybara and I have some problems with text field, Capybara can not find the field.
I need to create automatic tests and one of them has to fill in fields that changes all the time(id and name changes, they are like this: id="patternDailyStart_146d7547140" and this number is always different).
Html part looks like this:
<div class="timepicker">
<input value="" id="patternDailyStart_146d7547140"
name="patternDailyStart_146d7547140"
class="timepicker-input patternDailyStart hasDatepicker"
type="text">
<img class="ui-datepicker-trigger"
src="/mpromoter/assets/4716a6a0a357181/app/components/timefield/clock.png"
alt="..."
title="...">
</div>
This is time picking field. And The problem is that capybara can not find the field.. however I try to find it for filling.
When I try to find this xpath, then it is found, but when I want to fill it in with time($starttime=17:00) then it says that element not found or it does not exist.
These xpaths are found:
page.has_xpath?('//tbody/tr/div/input[contains(., "patternDailyStart")]')
page.has_xpath?(:xpath, "//*[#class='timepicker-input patternDailyStart hasDatepicker']")
I tried to fill in like this:
And(/^fill up the fields$/) do
field = find("//*[#class='timepicker-input patternDailyStart hasDatepicker'")
field.set $starttime
end
And like this:
fill_in('timepicker-input.patternDailyStart.hasDatepicker', :with => $starttime)
And like this:
within(:xpath,'//tbody/tr/div/input[contains(., "patternDailyStart")]'){ fill_in("#patternDailyStart", with: $starttime)}
And many other ways but still nothing fills in those fields..
So I am asking for some help. What I have to do, any suggestions?
Thank you... :)
I think the easiest would be to locate the inputs by its 'patternDailyStart' class:
find(:css, '.patternDailyStart').set($starttime)

A way around Element cannot be scrolled into view - Watir-webdriver with Ruby

So, we have the following code in our page:
<div class="toggle-wrapper">
<input id="HasRegistration_true" class="registration_required toggle" type="radio" value="True" name="HasRegistration" data-val-required="The HasRegistration field is required." data-val="true">
<label for="HasRegistration_true" class="">On</label>
<input id="HasRegistration_false" class="registration_required toggle" type="radio" value="False" name="HasRegistration" checked="checked">
<label class="checked" for="HasRegistration_false">Off</label>
</div>
These are 2 radio buttons. 'On' and 'Off'. 'Off' is the default value.
Using Watir-webdriver and Ruby, we want to select the 'On' radio button. We do so like this:
browser.radio(:id => "HasRegistration_true").set
But in doing so, we get the following error:
`WebElement.clickElement': Element cannot be scrolled into view:[object HTMLInputElement] (Selenium::WebDriver::Error::MoveTargetOutOfBoundsError)
We know Selenium 2 scrolls the page to the element, so trying to scroll down is useless.
We are always using the latest releases of watir-webdriver and ruby.
We can't change the HTML of the page since we're QA engineers.
Here are two solutions that have worked for me:
There is a Ruby gem called watir-scroll that can work.
Then
require 'watir-scroll'
browser.scroll.to browser.radio(:id, "HasRegistration_true")
If you don't want to add a gem, my co-worker suggested something that somewhat surprisingly (to me) had the same effect as the above code:
browser.radio(:id, "HasRegistration_true").focus
browser.radio(:id, "HasRegistration_true").set
In my code, ".focus" scrolled straight to the element that was previously not visible. It may work for you as well.
First of all try locating the element using XPATH:
browser.element(:xpath, "//input[#id='HasRegistration_true']").click
or
alternatively if it is a hidden element you are trying to locate then you are better off using CSS. Download firebug add-on for firefox and copy the CSS path of your element.
It should be something like:
browser.element(:css => "the CSS path you have copied from Firebug").click
One of the 2 should do it for you!!
Best of luck!
You could manipulate the html on the fly by executing some javascript to make the radio element settable. To execute javascript on a page, do something like:
#browser.execute_script("your javascript here")
I used something like the following javascript to strip the class out of a label tag which moved it out of the way of the input tag I was attempting to act on for a Chrome specific problem I had.
execute_script("$(\"label.classname\").removeClass(\"classname inline\")")
If the element is contained within a form and a div (Wrap) class I found that I had to do the following to click the 'No' radio button on the "https://quote.comparethemarket.com/Motor/Motor/AboutYourVehicle.aspx?" page:
div_list = #browser.form(:action => "AboutYourVehicle.aspx?ton_t=CTMMO&prdcls=PC&rqstyp=newmotorquote&AFFCLIE=CM01").div(:class => "inputWrap").divs(:class => "custom-radio")
And then:
div_list[1].click
Hope this solves your issue too :-)
I'm not using watir but I have the same error as you "...could not be scrolled into view ...". I tried to use watir just to solve it and didn't work for me. Then, I use an ActionBuilder (move_to with click) and the error disappeared.
My line to avoid the error is:
#driver.action.move_to(*webelement*).click.perform
I hope it will be useful for you

Get specific element in webdriver containing text

What are some good ways to retrieve a specific element in WebDriver/Selenium2 based only on the text inside the element?
<div class="page">
<ul id="list">
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Grape</li>
</ul>
</div>
Essentially, I'd like to write something like this to retrieve the specific element:
#driver.find_element(:id, "list").find_element(:text, "Orange")
This is very similar to how I would use a selector when finding text inside a link (i.e. :link_text or :partial_link_text), but I would like to find elements by text inside normal, non-link elements.
Any suggestions? How do you deal with this issue? (In case you were wondering, I am using Ruby.)
You could do that with xPath. Something like this for your example:
#driver.find_element(:id, "list").find_element(:xpath, './/*[contains(., "Orange")]')
A couple years late, but I was just going to ask this question and answer it so other could find it...
I used a css selector to get all the li elements and then filtered the array based on the text:
#driver.find_elements(css: '#list > li').select {|el| el.text == 'Orange'}.first
You could then .click or .send_keys :return to select the option.

watir-webdriver click on image

Folks,
I have an image with the following HTML code:
<div unselectable="on" class="x-grid-cell-inner x-unselectable" style="; text-align: right;" id="ext-gen1453">
<img alt=""src="data:image/gif;base64,FRFRFR/GFFFFFFFFFF==" class="x-action-col-icon x-action-col-0 folder-action-add folder-action" data-qtip="Add New Music File" id="ext-gen1300">
When I click on the image it should open a pop up so that I can add new music file, I tried a few things but I am not able to click on that image. Any suggestions?
Thanks a lot
You can click on it by the class or a partial match of the class.
#browser.image(:class=>/folder-action-add folder-action/).click
Here is a list of the identifiers you can use for watir, I think it's mostly the same for watir-webdriver.
So far, you haven't got a consistent way of actually identifying the element. From what you've said in the comments, you've tried the 'text' attribute which doesn't exist, and the 'id' attribute which is auto generated and different every time.
You need to find a way of consistently identifying the element. It's usually preferable to use a semantic class on the element to make styling and testing easier and less brittle. You have a few classes declared, perhaps 'folder-action-add' expresses the intent of the button clearly? If not, you could add one such as 'add-music-file'.
Then you should be able to use watir to select an element by it's class, I'm not familiar with the syntax but at a guess, #browser.image(:class => 'add-music-file') might do the job.

Resources