Greasemonkey Click Button without ID or Name - automation

I'm trying to autoclick this button with greasemonkey. I tried to find a reference to this button with document.getElementsBy[ClassName/Name/TagName] with ClassName i find buttons but not the one i need. Any ideas how i can automate his click-event?
<button type="button" class="ml-2 mt-2 v-btn v-btn--depressed theme--light v-size--default amber darken-1 white--text ">
::before
<span class="v-btn__content">
<!---->
Überspringen
<i aria-hidden="true" class="v-icon notranslate v-icon--right material-icons theme--light">
redo
::after
</i>
<!---->
</span>
</button>
Screenshot from Firefox Inspector with Click Function
Thanks in Advance!

Just use xpath for element searching:
document.evaluate(XPATH, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
You can use class parameter instead id or name:
xpath: //button[#class='ml-2 mt-2 v-btn v-btn--depressed theme....']
If you do not need to use all value, you can use contains keyword:
xpath:
//button[contains(#class, 'ml-2 m2-2')]
css:
button[class*='ml-2 m2-2']
Of course, this value must be unique.
You can search child element and return back to the parent:
//button/span[#class='v-btn__content']/i/../..
You can use text for searching (bad practics if location possible to change)
//button/span[text()='Überspringen']/..

Related

How to click on an element in a list in robot framework

How can i select settings from this dropdown list.
I tried Click Element by(class/id..) but none of them work for me.
First i have to click on the profile icon, then choose the settings element
here is the html code of the icon :
<li class="dropdown userMenu hidden-sm hidden-xs" id="y7">
<a data-toggle="dropdown" class="dropdown-toggle pad10-top no-padding-left no-padding-right center" href="javascript:void(0)" id="yu">
<span class="ellipsis-menu no-margin pad5-bottom" data-toggle="tooltip" data-placement="bottom" title="Profile" id="yui_3_">
<i aria-hidden="true" class=" icon-user_icon pad5-right" id="y"></i>
</span>
<b class="caret"></b>
</a>
and here is the element of the list that i want to select :
<li id="y8">
<a id="settings" href="/cc/settings.html"><i class=""></i>Settings</a></li>
Any help please?
This should work.
Assuming that the list line element is of profile icon (It was unclear to me from the HTML you pasted, but you may better figure out on your application by inspecting it).
If needed be, you may apply a Sleep of 1-2 sec in between the two lines
Click Element xpath: //*[#title='Profile']
Click Element id: settings
P.S. I am assuming that you have imported all the required libraries for this (in fact, it is only SeleniumLibrary that is required for these two lines)

How can I find out what number in <ul> some <li> element is? In Selenium

I have a < ul > with unknown number of < li > elements. Each < li > has some text and also a button. How can I identify which < li > contains the text I'm looking for, in order to click the button in that same < li >?
<ul>
<li class="ot-queryitem row-fluid">
<div class="ot-queryitem__info ot-queryitem__info--left span7">
<span class="ot-queryitem__name">Äänikysely (Voice Activity and Participation Profile)</span>
</div>
<div class="ot-queryitem__info ot-queryitem__info--center span3"></div>
<div class="ot-queryitem__info ot-queryitem__info--right span2">
<button class="ot-button ot-button--undefined pull-right ot-queryitem__button">
<i class="icon-pencil fa ot-icon ot-icon--default" style="margin-right: 8px;"></i>
<span>Täytä</span>
</button>
<span class="ot-queryitem__logo"></span></div></li>
<li class="ot-queryitem row-fluid">
<div class="ot-queryitem__info ot-queryitem__info--left span7">
<span class="ot-queryitem__name">Nikotiiniriippuvuustesti</span>
</div>
<div class="ot-queryitem__info ot-queryitem__info--center span3"></div>
<div class="ot-queryitem__info ot-queryitem__info--right span2">
<button class="ot-button ot-button--undefined pull-right ot-queryitem__button">
<i class="icon-pencil fa ot-icon ot-icon--default" style="margin-right: 8px;"></i>
<span>Täytä</span>
</button>
<span class="ot-queryitem__logo"></span></div></li>
//span[text()='Nikotiiniriippuvuustesti'] will give you a <span> with the given text
/ancestor::li axis will give you the parent <li> tag
/descendant::button axis will give you the <button> you're looking for
Putting everything together:
//span[text()='Nikotiiniriippuvuustesti']/ancestor::li/descendant::button
Demo:
References:
XPath Tutorial
XPath Axes
XPath Operators & Functions
Try the following xpath.
xpath: //ul//li[contains(.,'Nikotiiniriippuvuustesti')]//button
OR
xpath: //ul//li[contains(.,'Äänikysely')]//button
However You can pass this Nikotiiniriippuvuustesti or Äänikysely as string variable in robotframework.Hope this helps.
Both the element with the text and the button are child elements under each <li>. You need to go up the html tree from the text and then look for a button under a sibling element
//div[span[contains(., 'Äänikysely')]]/following-sibling::div/button
To identify li tag which contains text you looking for as -
${YOUR_TEXT} Nikotiiniriippuvuustesti
## this keyword will give first matching element
${elements}= Get WebElement xpath://span[contains(text(),'${YOUR_TEXT}')]/ancestor::li
### wait for element to be present on page
Wait Until Page Contains Element ${elements}
## now click on button inside li tag found in above lines
Click Button xpath://span[contains(text(),'${YOUR_TEXT}')]/ancestor::li//button
note: locators are taken from the html sample you provided
You don't have to count the number of <li> within the <ul>.
To click on the respective button according to the text e.g. Äänikysely, Nikotiiniriippuvuustesti etc you can use the following solution:
To click for Äänikysely:
Click Button xpath://div[contains(#class, 'ot-queryitem__info--left')]/span[contains(.,'Äänikysely')]//following::button[#class='ot-button ot-button--undefined pull-right ot-queryitem__button']//span[text()='Täytä']
To click for Nikotiiniriippuvuustesti:
Click Button xpath://div[contains(#class, 'ot-queryitem__info--left')]/span[contains(.,'Nikotiiniriippuvuustesti')]//following::button[#class='ot-button ot-button--undefined pull-right ot-queryitem__button']//span[text()='Täytä']

Font Awesome not updating properly with vue

I'm trying to make a clickable "star" icon using font-awesome with bulma, switching between regular and solid styles (fas and far) in Vue, to achieve this I have the following component:
<template>
<span v-if="isStarred" class="icon starred config-icon clickable-text" #click="unstar">
<i class="far fa-star" title="Unstar Ranking"/>
</span>
<span v-else class="icon unstarred config-icon clickable-text" #click="star">
<i class="fas fa-star" title="Star Ranking"/>
</span>
</template>
The value isStarred is being updated properly and the span elements are updating accordingly. However the i element with the icon doesn't update until I fully reload the page.
I was able to make this work with v-show instead of v-if but I don't understand why this wouldn't work.
Vue tries to render elements as efficiently as possible, often re-using them instead of rendering from scratch. This isn’t always desirable though, so Vue offers a way for you to say, “These two elements are completely separate - don’t re-use them.” Add a key attribute with unique values:
<i class="far fa-star" title="Unstar Ranking" key="unstared"/>
...
<i class="fas fa-star" title="Star Ranking" key="stared"/>
Now those i elements will be rendered from scratch each time you toggle.
You can also update your classes with class binding:
<span v-if="isStarred" v-bind:class="{starred: isStarred, unstarred: !isStarred}" class="icon config-icon clickable-text" #click="toggleStar">
<i v-bind:class="{far: isStarred, fas: !isStarred}" class="fa-star" v-bind:title="title"/>
</span>
I switched the [fontawesome/js/all.js] to [fontawesome/css/all.css], and it solved the problem. I guess the fontawesome js is rendered after the vue.

Click on button without id

How click button in webdriver without any id, values. Class of button is changing dynamically.
Sample:
<div class="d-k-l d-y-r-c g-h-f-Ck b-Qb" role="button" style="-moz-user-select: none;" tabindex="0" aria-haspopup="true">
<div class="d-k-l d-y-r-c-ha">
Мои круги
</div>
<div class="d-k-l d-y-r-c-Qa"></div>
</div>
Thx.
Show more HTML please. So that we can find something useful in the context.
Currently the only possible way is to use XPath' text()
.//*[#role='button']/*[contains(text(), 'Мои круги')]
If you are sure relevant elements are div, you can use
.//div[#role='button']/div[contains(text(), 'Мои круги')]

how to click on a button when specific image is asscoiated with it

I am using selenium for testing my application.
In my application there are 5 buttons, each have a different image associated with it.
I want to click on button which have a specific image associated.
Currently i am using a while loop to get the node of image and then replacing this node into xpath of button to select it.
is there any way either with xpath or css to do this directly.
Providing more information-this is like submit button is there and then below this image is there. submit button and images are sibling element and need to click submit button when the next element is specific image
<div class="select">
<span class="sysTxtBtn submit xxs">
<span class="btnTagDummy">
</span>
<div class="specialRateMarking">
<img width="79" height="11" alt="Marking2" src="someimages"/>
</div>
<div class="select">
<span class="sysTxtBtn submit xxs">
<span class="btnTagDummy">
</span>
<div class="specialRateMarking">
<img width="79" height="11" alt="Marking1" src="someimages"/>
</div>
Could you include a snippet of your HTML? Below is an example of an image in a form and a few ways of locating it using Selenium, but these may not be relevant depending on your implementation:
<input id="submitForm" name="imgbtn" type="image" src="images/submit.png" />
id=submitForm
name=imgbtn
//input[#src='images/submit.png']
//input[contains(#src, 'submit.png')]
css=input[src='images/submit.png']
UPDATE:
Given the HTML:
<div class="select">
<span class="submit">
<div class="marking1"></div>
<div class="select">
<span class="submit">
<div class="marking2"></div>
You can locate the 'submit' span parent of the 'marking2' div using the following XPaths:
//div[#class='marking2']/..
//div[#class='marking2']/parent::*
//div[#class='marking2']/parent::span
UPDATE 2:
Based on the HTML now included in the question, you can locate the span with the class of submit related to the image many ways, a few examples follow:
//div[//img[#alt='Marking2']/span[contains(#class, 'select')]
//img[#alt='Marking2']/../../span
//div[img[#alt='Marking2']]/preceding-sibling::span
I hope this gives you some ideas. I'd certainly recommend XPath over CSS for locating these elements as it's much better at these sorts of relationships.