Select textarea by using the class and ID with Watir-WebDriver - ruby

Trying to figure out how to select a field on a form using textarea with specifying the class and the ID. Unfortunately, I don't have control over the HTML that is generated as it is a vendor product.
Sample HTML:
<textarea class="text sr " id="arid_WIN_0_636875000" style="left: 402px; top: 0px; width: 261px; height: 21px;" rows="1" cols="20" wrap="off" arautoctt="400" arautocak="0" maxlen="255"></textarea>
I need to use both the ID and the class because the ID is used in multiple spots as well as the class, however, I have found the combination of the two is unique.
I've tried doing:
z = textarea(:class => "text sr ", :id => "arid_WIN_0_636875000")
This came back with:
=> #<Watir::TextArea:0x272de17c located=false sel
>"arid_WIN_0_636875000", :tag_name=>"textarea"}>
Tried setting it and came back with:
Watir::Exception::UnknownObjectException: unable to locate element, using {:class=>"text sr ", :id=>"arid_WIN_0_636875000", :tag_name=>"textarea"}
from C:/Ruby21/lib/ruby/gems/2.1.0/gems/watir-webdriver-0.7.0/lib/watir-webdriver/elements/element.rb:507:in `assert_exists'
from C:/Ruby21/lib/ruby/gems/2.1.0/gems/watir-webdriver-0.7.0/lib/watir-webdriver/user_editable.rb:32:in `clear'
from C:/Ruby21/lib/ruby/gems/2.1.0/gems/watir-webdriver-0.7.0/lib/watir-webdriver/user_editable.rb:11:in `set'
from (irb):21:in `block in irb_binding'
from C:/Ruby21/lib/ruby/gems/2.1.0/gems/selenium-webdriver-2.45.0/lib/selenium/webdriver/common/target_locator.rb:50:in `window'
from C:/Ruby21/lib/ruby/gems/2.1.0/gems/watir-webdriver-0.7.0/lib/watir-webdriver/window.rb:193:in `use'
from (irb):20
from C:/Ruby21/bin/irb:11:in `<main>'
This is what the HTML is for the popup:
<div class="DIVPopup shadow " id="popup_0" style="left: 495px; top: 161.5px; width: 930px; height: 673px; overflow: hidden; visibility: inherit; z-index: 100004;" arwindowid="0"><table class="DIVPopup ResizablePopup" id="DivTable" cellspacing="0" cellpadding="0"><tbody><tr class="DIVPopupTitleBar DIVDraggable"><td class="topleft"> </td><td align="left" class="center" id="title_0" nowrap=""><div class="title">Name of form is here </div><button title="Close" class="Close right" id="ardivpcl" onclick="var target=FindClickedPopup('0', event); if(target){ target.OnCancel();target.stopBubbling(event);return false;}" type="button"></button></td><td class="topright"> </td></tr><tr><td class="DIVPopupBodyNoBorder DIVPopupBodyBorder" colspan="3"><iframe id="1433419427651P" src="/arsys/forms/vmpit-ermdy006/NameOfFormIsHere/Administrator/?cacheid=fa90df9&format=html" frameborder="0" style="width: 100%; height: 652px;"></iframe></td></tr></tbody></table><b class="rndfooter" style="background-color: rgb(255, 255, 255);"><b class="rnd1" style="background-color: rgb(255, 255, 255);"></b><b class="rnd2" style="background-color: rgb(255, 255, 255);"></b><b class="rnd3"></b></b><div class="ResizeHandle right" id="handle_0"></div></div>

Given the HTML for the popup, I would guess that it is just a div element within the original page rather than its own browser window. Accessing the popup should be with:
browser.div(:id => "popup_0")
That said, I do not see the textarea in it, which means it is likely in the iframe element. Iframes have to explicitly told to Watir, which means to find the textarea you need:
browser.div(:id => "popup_0").iframe.textarea(:class => "text sr ", :id => "arid_WIN_0_636875000")

I think the problem may be that you have a bad call. BTW Don't mix your hash styles. Pick the more modern style over the hashrocket. Try this...
get_a_better_name = textarea(class: "text sr ", id: "arid_WIN_0_636875000")
tip - Using a code linter like rubocop (https://github.com/bbatsov/rubocop) can help catch these errors.

Related

How can I select the option in the dropdown box?, while no options seen in html in cypress

Hi I am new in exploring cypress.
I notice that, there is no select options in my html code. How can I select the option in the dropdown box?
Let's take a look of my html
<div class="row asset_config">
<div class="loader-container">
<div class="loader-content">
<div class="required form-group"><label for="cc_7sgwxb2v9" class="">allocation</label>
<div class="Select css-b62m3t-container"><span id="react-select-3-live-region" class="css-1f43avz-a11yText-A11yText"></span><span aria-live="polite" aria-atomic="false" aria-relevant="additions text" class="css-1f43avz-a11yText-A11yText"></span>
<div class="Select__control css-1s2u09g-control">
<div class="Select__value-container css-319lph-ValueContainer">
<div class="Select__placeholder css-14el2xx-placeholder" id="react-select-3-placeholder">Select allocation</div>
<div class="Select__input-container css-6j8wv5-Input" data-value=""><input class="Select__input" autocapitalize="none" autocomplete="off" autocorrect="off" id="cc_7sgwxb2v9" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" role="combobox" value="" style="color: inherit; background: 0px center; opacity: 1; width: 100%; grid-area: 1 / 2 / auto / auto; font: inherit; min-width: 2px; border: 0px; margin: 0px; outline: 0px; padding: 0px;"></div>
</div>
<div class="Select__indicators css-1hb7zxy-IndicatorsContainer">
<div class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer" aria-hidden="true"><span class="connect-icon connect-icon-caret-down"></span></div>
</div>
</div><input name="allocationType" type="hidden" value="">
</div>
</div>
</div>
</div>
</div>
In fact, I also notice that, cypress studio suggest me code to click the dropdown box:
cy.get(':nth-child(2) > form > .allocation_session > .asset_config > .loader-container > .loader-content > .required > .Select > .Select__control > .Select__value-container > .Select__input-container').click()
I found that not only unreadable is this approach, but also not reliable, because sometimes suggested codes that click on other dropdown doesnt work, if I didnt run the example code above or other suggested code.
Is there any reason behind why suggested code is coupled with other suggested code?
Is there a better way to select the element I want to get?
edit:
picture included
The react-select has the same user-actions as an ordinary HTML select, but you cannot use cy.select() command on it.
The general pattern is
open the dropdown menu by clicking on the "main" control
find the option you want to select within the menu listbox that is injected into the DOM after the above click action
click that option
verify the text of the option is now showing in the placeholder
// open the dropdown menu
cy.contains('label', 'allocation')
.next('.Select')
.click()
// find the option
cy.contains('Balanced Plus')
.click()
// verify option is selected
cy.contains('label', 'allocation')
.next('.Select')
.find('.Select__placeholder')
.should('contain', 'Balanced Plus')

Cypress- unable to see/capture the popup

On the website that i am testing , i have a link -clicking to which brings out a popup.
I am able to locate the link , however clicking on the link results in an "uncaught exception TypeError: Cannot read property popup...". if i suppress the exception the test passes but i still can't see the popup.
I have tried putting waits but it didn't work. So thought of checking here if someone faced a similar issue?
The link element that brings up the popup is below
<a class="locpickerSelect" data-blank="<span>Select Location</span>" data-change="<span>Change Selection</span>" href="#"><span>Select Location</span></a>
The popup adds an additional div in the source code , below is what i see in source code when i click on the link
<div class="PopupOverlay" style="inset: 0px; position: fixed;"></div>
<div class="PopupShadow" style="width: 940px; height: 352px; top: 5px; left: 216px;"></div>
<div class="PopupFrame" style="width: 940px; height: 352px; left: 216px; top: 5px;">
<a class="ClosePopup icon cancel-circle"></a>
<iframe seamless="seamless" frameborder="0" width="100%" height="100%" src="https://<myurl>;forFeature=&selectOrgId=" style="display: block; height: 352px;"></iframe>
</div>
The "uncaught exception TypeError: Cannot read property popup..." probably is coming from the application, not the test.
You can put this at the top of the test,
Cypress.on('uncaught:exception', (err, runnable) => {
return false
})
This will suppress any exception from the app, but ideally you want to look at why it occurs.
There does not seem to be anything in the HTML you show that might cause it. Most likely it is in the click handler of locpickerSelect.

How can I add an md-icon next to an input like in angular material 1?

How can I add md-icon elements next to inputs like in angular material 1 and this screenshot from google contacts:
Google contacts edit form
I know I can use mdPrefix but I like this style better.
Code example:
<md-input-container>
<md-icon mdPrefix>star</md-icon>
<input placeholder="Test" mdInput />
</md-input-container>
The icon inside the input field and I'd like it to be next to it:
Using some css tricks, I was able make something close to the the provided screenshot.
css to position icons:
/deep/ .mat-icon {
color: grey;
width: 24px;
margin: 20px 40px 0 0;
}
html:
<div style="display: flex">
<md-icon >email</md-icon>
<md-input-container >
<input mdInput placeholder="Email">
</md-input-container>
</div>
Code example

Ruby Watir,Dijit, unable to locate table/tr/td and select value from table

I am trying to select a value from the table of dropdown menu. But Watir always gave me the unlocate error when using table/tr/td.
I can't locate the element using
#browser.div(:id, 'wikiActionMenuLink_dropdown').element(:tag_name, 'table').element(:tag_name, 'tbody').element(:tag_name => 'td').text
But the output of code below returns true.
#browser.div(:id, 'wikiActionMenuLink_dropdown').element(:tag_name, 'table').element(:tag_name, 'tbody').element(:tag_name => 'td').exists?
I also tried
#browser.select_list(:id, 'wikiActionMenuLink_dropdown').select_value('Delete Wiki')
but got error "unable to locate element, using {:id=>"wikiActionMenuLink_dropdown", :tag_name=>"select"}"
Below the html. Could someone give me some suggestions?
<div id="wikiActionMenuLink_dropdown" class="dijitPopup dijitMenuPopup" style="visibility: visible; top: 123.75px; left: 1592px; right: auto; z-index: 1000; height: auto; overflow: visible; display: none;" role="region" aria-label="dijit_Menu_2" dijitpopupparent="">
<table id="dijit_Menu_2" class="dijit dijitReset dijitMenuTab`enter code here`le lotusPlain dijitMenu dijitMenuPassive" cellspacing="0" tabindex="0" role="menu" widgetid="dijit_Menu_2" style="top: 0px; visibility: visible;">
<tbody class="dijitReset" data-dojo-attach-point="containerNode">
<tr id="dijit_MenuItem_15" class="dijitReset dijitMenuItem" tabindex="-1" role="menuitem" data-dojo-attach-point="focusNode" style="-moz-user-select: none;" aria-label="Edit Wiki " title="Edit settings of this wiki." widgetid="dijit_MenuItem_15">
<tr id="dijit_MenuItem_16" class="dijitReset dijitMenuItem" tabindex="-1" role="menuitem" data-dojo-attach-point="focusNode" style="-moz-user-select: none;" aria-label="Delete Wiki " title="Delete this wiki." widgetid="dijit_MenuItem_16">
</tbody>
</table>
<iframe class="dijitBackgroundIframe" src="javascript:""" role="presentation" style="opacity: 0.1; width: 100%; height: 100%;" tabindex="-1">
<html>
<head></head>
<body></body>
</html>
</iframe>
</div>
Watir will only return the text of an element if the text is currently visible, regardless of whether the element exists. If you made the same call in your first example with .present? instead of .exists? it would return false.
For non-select/option dropdown interactions, you usually need to click the dropdown element first, and then once the options are visible, click on the one you want.

ajax window doesnt work when tag is deeply nested in the DOM

i am struggeling with a ajax window getting opened in deep nested DOM. I am not that good in jquery so i try to find some help here.
jWindow is supposed to open a new window on click with ajax-content.
For testing i put a Link just under the first DIV. THIS WORKES PERFECT !!!
Then i added some code to generate a TABLE with contains one coloum with a Number which contains the SAME a-tag as the test on top. THIS DOES NOT WORK.
Here is a copy of the DOM(i put horizontal rules around the two a-tags to make it more easy to find them):
<div id="content">
<p>
<a class="get_detail_bill_window" bnr="177" shop="2" href="#">Text Ajax</a>
</p>
<div id="form_selection">
<div class="ui-widget ui-widget-content ui-corner-all" style="padding: 5px; font-size: 1em; width: 1200px;">
<div class="t_fixed_header_main_wrapper ui-widget ui-widget-header ui ui-corner-all">
<div class="t_fixed_header_caption ui-widget-header ui-corner-top">
<div class="t_fixed_header_main_wrapper_child">
<div class="t_fixed_header ui-state-default ui" style="border: medium none; font-weight: normal;">
<div class="headtable ui-state-default" style="margin-right: 15px;">
<div class="body ui-widget-content" style="height: 340px; overflow-y: scroll;">
<div>
<table id="atcs_sort" style="width: 1182px;">
<colgroup>
<tbody>
<tr>
<td class="ui-widget-content">2011-10-16</td>
<td class="numeric ui-widget-content">
<a class="get_detail_bill_window" bnr="341" shop="2" href="#">341</a>
</td>
<td class="numeric ui-widget-content">02:25:08</td>
<td class="numeric ui-widget-content">2011-10-16</td>
If you have a look at these 2 anchors, they are absolute the same. But the one nested in the DOM does not want to work.
Here is the code of the Document ready:
$(".get_detail_bill_window").on({
click: function() {
var shop=$(this).attr('shop');
var bnr=$(this).attr('bnr');
alert("bin im Click - Shop: "+shop+" Billnr: "+bnr);
var a = $.jWindow
({
id: 'detail_bill',
title: 'Details of Bill-Nr.: '+bnr,
minimiseButton: false,
maximiseButton: false,
modal: true,
posx: 450,
posy: 50,
width: 700,
height: 200,
type: 'ajax',
url: 'sge_detail_bill.php?s='+shop+'&bnr='+bnr
}).show();
a.update();
}
});
I tried this to see, if the selector might have a problem:
var pars = $(".get_detail_bill_window");
for( i=0; i<pars.length; i++ ){
alert("Found paragraph: " + pars[i].innerHTML);
}
But i found all(the top sample AND the nested ones) of the a-tags with this class.
So, i am totally lost and desperate. No idea why these nested links are not working.
If somebody have a solution, i would be very greatful.
Many Thanks in advance,
Joe
what is your question put short? rephrase plz. but in case i understood correctly, you want to loop throguh all the elements in your DOM
lets say php made it look like
<.div id='foo'>
<.ul>
<.li><.span id='foo1'><./span><.span id='foo2'><./span><./li>
<.li><./li>
<.li><./li>
<./ul>
<./div>
and to access each of the inner elements do
$('#foo foo1').click(function(){// handler in
$('#foo #foo1').parent().each(function(){// access element, go back to li, loop through all of them
$('#foo2',this).show();// on click of foo1, foo2 will show (as an example)
});
},function(){// handler out
$('#foo #foo1').parent().each(function(){
$('#foo2',this).hide();
});
});
hope this helps somewhat

Resources