Watir: Escaping special characters - watir

I have a problem while escaping the special character -. Here is the HTML code snippet:
<input class="form-control dob ng-pristine ng-valid" type="text" readonly="readonly" data-date-format="mm/dd/yy" ng-model="pollObj.poll_question.start_time" datepicker=""></input>
<span></span>
<input class="form-control dob ng-pristine ng-valid" type="text" readonly="readonly" data-date-format="mm/dd/yy" ng-model="pollObj.poll_question.end_time" datepicker=""></input>
I am using watir web driver to select a date from the date picker.
So if I have to click the first input from the above html snippet, the only thing that can be distinguished is the value for ng-model. Hence I thought of writing like this:
browser.input(:ng-model="pollObj.poll_question.start_time").when_present.click
In the above code, I need to escape - in ng-model. Using backslash doesnot help.
Can someone please help?

The ng-model is not a standard attribute, so Watir-Webdriver does not directly support the attribute as a locator.
One option is to use a css-selector:
browser.element(:css=> 'input[ng-model="pollObj.poll_question.start_time"]').when_present.click
Or you could use xpath:
browser.input(:xpath => './/input[#ng-model="pollObj.poll_question.start_time"]').when_present.click

Related

Array field post Node js but after show only first value

I am using post array field name but show only first please help.
<input type="text" name="brand[]" id="brand">ADD more
<input type="text" name="brand[]" id="brand">
Use this but post this data only get first value.
Both the input tags in your html have same name attribute. As far as HTML is concerned, it simply ignores the fields in a form with duplicate names.
If you want your inputs to be parsed as array by nodehs body parser, you will need to include the indices in the input tag name.
<input type="text" name="brand[0]" id="brand0">ADD more
<input type="text" name="brand[1]" id="brand1">
EDIT::
All the ids on a page are also expected to be unique.

Chrome Autofill not filling correct input

Bit confusing and could not find any related issues online. As can be seen in the screenshot, when using the Chrome Autofill it is filling up the wrong input, even though the input have different ids.
This is using knockout template but not sure if its related.
HTML code for Billing Address
<input data-bind="value: $data.editor.SearchHouseNumber, uniqueId: $data.editor.SearchHouseNumber, valueUpdate: ['blur', 'afterkeydown', 'onload'], css: $data.editor.labelClass" maxlength="100" name="customerSearchHouseNumber" placeholder="House no." size="24" type="text" value="" title="" id="fld2">
HTML code for Delivery Address
<input data-bind="value: $data.editor.SearchHouseNumber, uniqueId: $data.editor.SearchHouseNumber, valueUpdate: ['blur', 'afterkeydown', 'onload'], css: $data.editor.labelClass" maxlength="100" name="customerSearchHouseNumber" placeholder="House no." size="24" type="text" value="" title="" id="fld17">
As far as I can tell, Chrome actually implements the full autocomplete spec here, which means you should be able to specify which type of data Chrome should use to fill in the fields. Therefore, you can add the following attributes to your inputs:
autocomplete="billing street-address" and autocomplete="shipping street-address", and Chrome will likely be able to supply the correct values.
Note that street-address designation can take multiline values (as per spec), so you may prefer address-line1.
Example:
<input name="billing_address" id="fld2" autocomplete="billing street-address">

AngularJS: Why ng-model scope's variable is not shown in inspector if input field is empty?

I have an input form like this:
<form name="userForm">
<md-input-container>
<label>Username</label>
<input name="username" ng-model="userLogin.username" required>
<div ng-messages="userLogin.username.$error" ng-show="userLogin.username.$dirty">
<div ng-message="required">This is required!</div>
</div>
</md-input-container>
</form>
<div layout="row" layout-align="center">
<md-button class="md-raised md-primary md-padding button-margin" ng-click="handleLoginResult()" ng-disabled="!userForm.$valid">Login</md-button>
</div>
The problem is that until I don't write anything in the input field (= user interaction), the userLogin.username variable doesn't appear in the $scope (I'm using AngularJS' addon for Chrome dev console).
Indeed if I try to print it I get erro (userLogin is not defined >> username can't be read).
Any clue?
Typically, in an AngularJS controller, if you do not create the property implicitly on the $scope object it will not be defined until a bound element attempts to update it. This is just the nature of how AngularJS works and the nature of dynamic Javascript. Is there a reason you need to get to the property if it isn't defined yet? From your question I am assuming that you were just prodding it with the console. If you really need to use it in a function before it is defined use the OR logical operator in Javascript represented by two pipe characters:
$scope.userLogin || '';

How to select Radio button in Capybara with adjacent text?

The capybara choose method works well for a radio button which has the label tag next to it with the required text, like below:
<input id="rGEQr-real" type="radio" name="_pgcr6g7j"/>
<label id="rGEQr-cnt" class="z-radio-content" for="rGEQr-real">Web IDE Support</label>
page.choose('Web IDE Support') works fine for this.
But for something like this:
<form action="">
<input type="radio" value="male" name="sex"/>
MALE
<br/>
<input type="radio" value="female" name="sex"/>
FEMALE
</form>
which doesnt have label tag, the simple choose fails to set radio button.
How can we achieve this in Capybara??
If you need to choose a radio button by anything other than its name, id or label text, you will need to:
Find the radio button, typically with find and a CSS or XPath.
Call the set method
In this case, you will need to use XPath since CSS-selectors do not support locating by text. The XPath will need to check that the following sibling text node is the specified text. This can be done with:
# Select MALE
page.find(:xpath, '//input[following-sibling::text()[1][normalize-space(.) = "MALE"]]').set(true)
# Select FEMALE
page.find(:xpath, '//input[following-sibling::text()[1][normalize-space(.) = "FEMALE"]]').set(true)

Locating a input of type email with SafariWatir

I just started using Watir to write some simple tests for my web application.
First thing I want to do is to populate an login form with an email input element of type "email" with SafariWatir on OS X.
This won't work:
browser.text_field(:id, "email").set('my#email.com')
Trace:
/Library/Ruby/Gems/1.8/gems/safariwatir-0.4.0/lib/safariwatir/scripter.rb:661:in `execute': Unable to locate TextField, using :id and "email" (Watir::Exception::UnknownObjectException)
from /Library/Ruby/Gems/1.8/gems/safariwatir-0.4.0/lib/safariwatir/scripter.rb:303:in `focus'
from /Library/Ruby/Gems/1.8/gems/safariwatir-0.4.0/lib/safariwatir.rb:525:in `set'
from test.rb:10
I assume that the element is not matched because of the different type attribute value. The documentation does not state any specification for this kind of elements. Any ideas?
Thanks!
Update: adding (reformatted) HTML sample based on user's comment that they are testing pinganalytics
<form action="http://pingalytics.com/" method="post" accept-charset="utf-8">
<p>
<label for="email">Email</label>
<input type="email" name="email" value="" id="email" autofocus="" />
</p>
<p>
<label for="password">Password</label>
<input type="password" name="password" value="" id="password" />
</p>
<input type="submit" name="login" value="Log in with Pingdom" class="primary" />
<p>
<a href="https://www.pingdom.com/signup/">
Sign up
</a>
, or
<a href="https://pp.pingdom.com/index.php/login" title="Reset your Pingdom password">
recover your password
</a>
.
</p>
</form>
the 'email' type for an input element is new as of HTML5. Safariwatir is an older project which pretty much predates HTML5. It has not seen a lot of recent work and it is highly unlikely it would be looking for this type when searching for potential 'text_field' elements.
Watir 3.0 or Watir-webdriver would be a safer bet as a lot of work has gone into those to bring them up to properly supporting HTML5.
Also since Webdriver has just recently added support for Safari (see here for instructions), it is now a viable alternative to safariwatir (which I highly expect will see no further work going forward.)
The Safari support is still a tiny bit DYI as you have to build your own safari extension and it only works on a Mac, but that may change if we see someone start publishing a standard safari extension that could be downloaded from an online gallery

Resources