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.
Related
I'm currently trying to find this tab and click on it. I'm trying to find a easier way of clicking on this button. In my code, I tried to use find command and it's unable to find this tab.
<div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab">Animals</div>
Code:
find('tab[div=Animals]').click
Not sure what I'm doing wrong.
It looks like you need to study CSS selectors a bit more. 'Animals' is text content and CSS does not provide a way to query on text content. In Capybara you can use the text option to filter matching nodes by their text content so combining valid CSS with the text filter like
find('div[role="tab"]', text: 'Animals').click
or
find('div.ant-tabs-tab', text: 'Animals').click
would be ways of clicking on that element
Note: I would recommend https://flukeout.github.io/ to learn what you can and can't do with CSS selectors.
I don't want to use xpath on the elements below.
element :img_login, :xpath, '//[#id="main-wrapper"]/div/section/div/div[2]/div/div/div[1]/img'
element :msg_login_senha_invalidos, :xpath, '//[#id="main-wrapper"]/div/section/div/div[2]/div/div/div[2]/div/p'
They are on the page as follows:
element img_login
<div class="sc-jRQAMF eRnhep">
<img src="https://quasar-flash-staging.herokuapp.com/assets/login/flashLogo-3a77796fc2a3316fe0945c6faf248b57a2545077fac44301de3ec3d8c30eba3f.png" alt="Quasar Flash">
</div>
element msg_login_senha_invalidos
<p class="MuiFormHelperText-root MuiFormHelperText-contained Mui-error MuiFormHelperText-filled">Login e/ou senha inválidos</p>
You have asked multiple questions about converting from using XPath to some other type of selector when using Site-Prism. StackOverflow is meant to be a place to come, learn, and improve your skills - not just to get someone else to do your work. It really seems you'd be better off reading up on CSS and how it can be used to select elements. Also note that there's nothing specifically wrong with using XPath, per se, it's just the way people new to testing and selecting elements on a page tend to use it (just copying a fully specified selector from their browser) that leads to having selectors that are way too specific and therefore brittle. A good site for you to learn about the different general CSS selector options available is https://flukeout.github.io/ - and you can look at the built-in selector types provided by Capybara at https://github.com/teamcapybara/capybara/blob/master/lib/capybara/selector.rb#L18
In your current case the below may work, but with the HTML you have provided all that's possible to say is that they will match the elements shown however they may also match other elements which will give you ambiguous element errors.
element :img_login, :css, 'img[alt="Quasar Flash"]' # CSS attribute selector
element :msg_login_senha_invalidos, :css, 'p.Mui-error', text: 'Login e/ou senha inválidos' # CSS class selector combined with Capybara text filter
Hi I'm trying to select an edit button and I am having difficulty selecting it.
<td>
<a onclick="new Ajax.Request('/media/remote/edit_source/3', {asynchronous:true, evalScripts:true}); return false;" href="#">
<img title="Edit" src="/media/images/edit.gif?1258500617" alt="Edit">
</a>
I have the number at the end of ('/media/remote/edit_source/3') the which changes and I have stored it in #rep_id variable.
I can't use xpath because the table changes often. Any suggestions? Any help is greatly appreciated. Below is what I have tried and fails. I am fairly new to watir and love it, but occasionally I run into things like this and get stumped.
browser.a(:text, "/media/remote/edit_source/#{#rep_id}").when_present.click
The line:
browser.a(:text, "/media/remote/edit_source/#{#rep_id}").when_present.click
fails because:
The content you are looking for is in the onclick attribute (rather than the text)
The locator is passed a string for the second parameter. This means that it is looking for something that exactly matches that. Given that you are only using part of the text/attribute, you need to use a regexp.
If you are using watir-webdriver, there is support for locating an element by its :onclick attribute. You can use a regexp to partially match the :onclick attribute.
browser.link(:onclick => /#{Regexp.escape("/media/remote/edit_source/#{#rep_id}")}/).when_present.click
If you are also using watir-classic (for IE testing), the above will not work. Instead, you can check the html of the link. Checking the html also works in watir-webdriver, but could be less robust than using :onclick.
browser.link(:html => /#{Regexp.escape("/media/remote/edit_source/#{#rep_id}")}/).when_present.click
From your example, it looks like you are using the URL from the onclick event handler as a :text locator, which I'd expect to fail unless that text does exist.
You could potentially click on the img. Examples:
browser.image(:title, "Edit").click
browser.image(:src, "/media/images/edit.gif?1258500617").click
browser.image(:src, /edit\.gif\?\d{10}/).click # regex the src
Otherwise, you might need to use the fire_event method to trigger the event handler, which looks like this:
browser.link(:id, "foo").fire_event "onclick"
These are the links to the fire_event docs for watir and watir-webdriver for reference.
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
The Problem:
I am working on a site where I wanted to use JQTransform to quickly get a good looking form for a contact page. Also, to avoid the customer getting junk, I decided to add reCAPTCHA. I ran into the issue of JQTransform styles for the textbox causing the elements in the reCAPTCHA to be displaced.
It seemed like the type of problem that would have a simple fix but I struggled with it for a while.
I tried the solution at:
JQTransform - Exclude an element from styling?
This did not solve the issue, nor did a few other answers to the "How do you make JQTransform stop JQTransforming an element?" question.
What has produced usable results is adding:
<script type="text/javascript">
var RecaptchaOptions = {
theme: 'clean'
};
</script>
This changes the reCAPTCHA to a format that looks better in the form anyway. But it leaves 2 textbox styles. One that is your normal default textbox and another underneath that is the JQTransform rounded corner, light blue on hover/focus textbox.
Then I added:
$(function () {
$( "#recaptcha_response_field" ).attr('style', 'border: 0px; padding: 5px; solid #3c3c3c; width: 302px;');
});
and this alters the style that reCAPTCHA has for the textbox. Now the textbox looks like the other inputs of the form. I am pretty happy with the result.
(I know you're now asking: "Then why are you here?")
The Question:
Is there a way to have JQTransform ignore any input,checkbox,etc that is in the <form></form> by wrapping those in a div?
If I want to use JQTransform with some other plug-in in the future I would like to be able to just drop it in to a div like:
<div class="donot-jqtransform">
<?php
echo printCaptchaPlugin();
?>
</div>
or
<div class="donot-jqtransform">
<%= PrintPasswordValidationPlugin() >
</div>
That way I don't have to worry about what the code brings into the form and it will work and look as intended. That's the idea of having the abstraction in the first place, right? So if I want to switch out reCAPTCHA with another option, all I do is replace code in the printCaptchaPlugin() function and all should be bacon(good) for any form that uses it.
well i've made a new library - csTransPie – basing it on jqtransform – jqtransform is a great library but it really has many problems
I'm creating regular input fields (css styled) and you won't have those problems
https://github.com/pkoretic/csTransPie
It’s a work in progress but even now it’s better than jqtransform (more than half of the css rewritten, many bugs solved, clean css…)
now you can use it per element with just one class!
all suggestions are welcome!
Sorry if it's bad form to pile in on an old answered question, but I found this as I had the same problem.
I didn't want to add another library to my project, so I amended the jqtransform.js to include this line in the TextArea handler (line 221-ish)
if (textarea.parents().hasClass('jqTransformIgnore')) { return; }
I then just had to add the jqtransformIgnore class to the recaptcha div...
<div class="g-recaptcha jqTransformIgnore" data-sitekey="blahblahblah"></div>
... and that did the trick!