I am playing around with rpsec and watir-webdriver, and am encountering a strange issue where I can click into a button, but I cannot interact with (or change) the text in the span inside. This is what the html looks like:
<button class="pure-button toggle-mode button-link edit-text-button-element" data-reactid=".0.1.0.1.1.0.0.0.0" title="Edit">
<span class="value false" data-reactid=".0.1.0.1.1.0.0.0.0.0">Untitled</span>
</span>
</button>
Right now my ruby code looks like this:
foo = #browser.button(:class, 'pure-button toggle-mode button-link edit-text-button-element')
foo.click
foo.span.set('Hello')
Running this gives me the initial error expected Hash or (:how, 'what'), got ["Hello"]
Any thoughts on what I'm doing wrong here?
Found a solution that works: after clicking to interact with the element, I was able to set text by using send_keys. So I did this:
foo = #browser.button(:class, 'pure-button toggle-mode button-link edit-text-button-element')
foo.click
#browser.send_keys {keystrokes simulated here}
That is because you cannot set text of the span in watir-webdriver. At least so easily. But if you will do for example:
puts foo.span.text
it will work. Here is the full list of what you can do with span: Usefull Link
Of course there is the way to change the text in your span:
browser.execute_script("arguments[0].textContent= 'Hello'", foo.span)
But I cannot imagine the situation when it will be really necessary for the real testing in a real world.
The class locator only accepts a single class.
If you need all of the classes for it to be unique do:
#browser.button(css: ".pure-button.toggle-mode.button-link.edit-text-button-element")
Related
I am trying to create some angular dynamically.
Statically created works.
eg.
<div>
<popover-content #pop1
title="Hello"
placement="right"
[closeOnClickOutside]="true">
Popup One
</popover-content>
<popover-content #pop2
title="Hello"
placement="right"
[closeOnClickOutside]="true">
Popup Two
</popover-content>
Testing this <span [popover]="pop1" [popoverOnHover]="true">Pop1</span>.
Testing this <span [popover]="pop2" [popoverOnHover]="true">Pop2</span>.
</div>
Now, I want to create these s dynamically from my data.
But then it doesn't work with this #pop1/#pop2 thing.
Non-working code:
<div>
<popover-content *ngFor="let p of allPops; let index = index"
#pop{{index}}
title="Hello"
placement="right"
[closeOnClickOutside]="true">
{{p.message}}
</popover-content>
Testing this <span [popover]="pop1" [popoverOnHover]="true">Pop1</span>.
Testing this <span [popover]="pop2" [popoverOnHover]="true">Pop2</span>.
</div>
So, this #pop{{index}} doesn't work. I also tried with the following style [attr.id]="'#pop' + index". Doesn't work too. So what's so special about this # inside a custom tag? How can I dynamically create it and make it work?
This is unfortunately not possible, more about this issue here:
https://github.com/angular/angular/issues/4581
Sorry, anchors have to be statically analyzable and hence can not be dynamically generated. Same way as you can not dynamically create local variables in programing languages.
Local references are not suitable for such a thing I am afraid...
Btw local template reference is not the same as id attribute. The thing you tried would work just for assigning the id attribute, prefixed with #.
https://angular.io/guide/template-syntax#ref-vars
I have this button:-
<div class="dsk-col-1-4 card new">
<div class="div_center_div">
<span class="icon icon_plus-black-symbol"></span>
<h2>Create</h2>
</div>
</div>
But I tried with find element by classname:-
driver.findElementByClassName("dsk-col-1-4 card new").click();
But it does not work.
Any help?
Move to your element and click. Example:
new Actions(driver).MoveToElement(yourElement).Click().Perform();
The "by class name" locator usually expects a single class name to be passed:
driver.findElementByClassName("card").click();
If you want to use multiple classes, go with a "by CSS selector"
driver.findElementByCssSelector(".card.new").click();
Note that the dsk-col-1-4 class is not a very good choice for an element locator - this looks very much like a layout-oriented class name which not only have a higher probability to b changed, but also does not bring any information about the element and it's purpose. card and new on the other hand are a better fit.
Ok so I couldn't understand exactly Which element you want to click on,
So based on my assumption , try below Xpaths :
1) if it is <div class="dsk-col-1-4 card new"> that you want to click
//div[contains(#class,'dsk-col-1-4 card new')]
2) If it is that you want to click,
//span[contains(#class,'icon icon_plus-black-symbol')]
3) If it is <h2>Create</h2> that you want to click,
//h2[text()='Create']
Hope this Helps!!
Within your locator you're passing multiple class names, and although they are both assigned to the element the findElementByClassName function realy only works when it is a single class name. The way I'd do it would be to use findelement(By.Xpath()), in this instance you'd need to use
webDriver.findElement(By.xpath("//div[contains(#class,'dsk-col-1-4 card new')]")).click();
I'm facing a problem while optimizing a WebView for mobile devices. It's about making a Search bar visible which is hidden inside a <p> of a nested. However, I'm finding no way to select only the span of the Search bar and its label because the other spans in this <p> are called practically the same. Whenever I try to do something other than hiding / showing the entire paragraph, nothing works.
It looks something like this
<div class="setaction">
<p>
<span class="nowrap>
<span class="labeltext">
<label for="stxt">Search:
</label>
</span>
<input type="text" class="text" size="12" name="stxt" id="stxt" value=""
onchange="this.form.what.value='srch'; this.form.submit();"/>
....
</span>
So this is the Search label and Search bar that I need, what follows is a (kinda unnecessary) button and a few more options that I don't need to display. They are all inside a <span class="nowrap">(there are multiples, one after another) and I'm at a loss about how to only target the few things inside this paragraph that I need.
I would try to select only stxt, however when I try to do it via div.setaction stxt or any variation of it, nothing happens. What am I doing wrong?
Try using attribute selector:
$("[for='stxt']")
Which will give you the label.
If you are trying to select stxt it appears you are selecting a tag <stxt></stxt>. This is obviously not your intent.
Make sure to use # or . before the selector to select an id or class.
If the element you are selecting does not have an id or class, you can select it by an attribute:
[attribute=value] /* selects elements whose attribute match the value */
e.g.
[for="stxt"]
If you are trying to select the input, just use #stxt
If you are trying to select the label, you can either do:
[for="stxt"], label or .setaction label
Let me know if you need any help.
Are you trying to select using jquery or CSS?
If you are trying with css, you need to have the class assigned for label too. Here you are using "for" and Css can not select that.
You can also select it in this way.
div.setaction label
If you are using jquery, you can use "attr".
I can't believe that nobody has said this yet! CSS has a way built in by default for this very situation. You should apply the CSS:
p:first-child{
CSS here
}
to select the first option. More info here and here
I'd like to create an HTML form submit button with the value 'add tag', however, the web page is in Swedish, so I'd like to have a different button text.
That is, I want to have a button like
but I want to have my code like
if (request.getParameter(cmd).equals("add tag"))
tags.addTag( /*...*/ );
Is this possible? If so, how?
It's possible using the button element.
<button name="name" value="value" type="submit">Sök</button>
From the W3C page on button:
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content.
Following the #greg0ire suggestion in comments:
<input type="submit" name="add_tag" value="Lägg till tag" />
In your server side, you'll do something like:
if (request.getParameter("add_tag") != null)
tags.addTag( /*...*/ );
(Since I don't know that language (java?), there may be syntax errors.)
I would prefer the <button> solution, but it doesn't work as expected on IE < 9.
There are plenty of answers here explaining what you could do (I use the different field name one) but the simple (and as-yet unstated) answer to your question is 'no' - you can't have a different text and value using just HTML.
I don't know if I got you right, but, as I understand, you could use an additional hidden field with the value "add tag" and let the button have the desired text.
If you handle "adding tag" via JScript:
<form ...>
<button onclick="...">any text you want</button>
</form>
Or above if handle via page reload
I have a FAYT input I'm checking. I type in the textbox, see the options unfold and click one of them. All this passes neatly but there is something in the process that fails because the selected category is not selected. (this feature works like a charm when you try it manually)
This is the outline of the drop down suggestions' html:
<div id="suggestions">
<span name="span1" onclick="selectByClick()" onMouseOver="changeColor()">text1<span/>
<span name="span2" onclick="selectByClick()" onMouseOver="changeColor()">text2<span/>
</div>
What I'm doing is:
sel.click('//div[#id="suggestions"]//span[2]')
Ideas what could be causing this?
ok got it:
sel.mouse_over(xpath)
sel.click(xpath)