Locating element in a pagination bar - selenium

The button in the code "AS PDF" ,As excel" are wrapped in the button Export and the export button is embedded within a pagination toolbar
I am unable to locate this element in webdriver
tried
"//span[text()='As PDF']"
Still i see error unable to locate the element
<li class="leaf">
<button id="export" class="button capsule mutton up last over">
<span class="wrap">
Export
<span class="icon"/>
<span class="indicator"/>
</span>
</button>
</li>
ul id="menuList">
<li id="menuList_simpleAction.Report.exportReport" class="leaf">
<p class="wrap button">
<span class="icon"/>
<!--Item text goes here-->
As PDF
</p>
</li>
<li id="menuList_simpleAction.Report.exportReport" class="leaf">
<p class="wrap button">
<span class="icon"/>
<!--Item text goes here-->
As Excel
</p>
Please help

If you are using java code then you can use
driver.findElement(By.linkText("As PDF"));
or you can get all the icons using
List<WebElement> list = driver.findElements(By.xpath("//span[#class='icon']"));
for(WebElement ele: list){
if(ele.getText().equals("As PDF")){
ele.click();
}
}
Hope this helps you.

Related

How to select the first option in a radio button group with selenium when its ID changes with every new page load

I am writing a test automation solution with Selenium in Java.
I want to select to first option in a radio button group on my page.
The HTML id and content of these options are dynamically generated.
The options belong to a radio button group with data-cy=tv-select and name=selectTv.
How can I select the first option in this radio button group?
EDIT This is the html code:
<section _ngcontent-hqh-c168="">
<span _ngcontent-hqh-c168="">
<vi-select-tv _ngcontent-hqh-c168="" _nghost-hqh-c167="">
<mat-radio-group _ngcontent-hqh-c167="" role="radiogroup" name="selectTv" data-cy="tv-select"
class="mat-radio-group tvken-select ng-pristine ng-valid ng-star-inserted ng-touched">
<mat-radio-button _ngcontent-hqh-c167="" class="mat-radio-button mat-accent ng-star-inserted" id="mat-radio-8">
<label class="mat-radio-label" for="mat-radio-8-input">
<span class="mat-radio-container">
<span class="mat-radio-outer-circle"></span>
<span class="mat-radio-inner-circle">
</span>
<input type="radio"
class="mat-radio-input cdk-visually-hidden"
id="mat-radio-8-input"
tabindex="0"
name="selectTv"
value="NIEUW_a11fd55d-5792-4f19-8764-ccb188d20591">
<span mat-ripple="" class="mat-ripple mat-radio-ripple mat-focus-indicator">
<span class="mat-ripple-element mat-radio-persistent-ripple">
</span>
</span>
</span>
<span class="mat-radio-label-content">
<span style="display: none;"> </span>tv 1: 02-10-2021 13:20 tot 02-10-2021 15:20</span>
</label>
</mat-radio-button>
<mat-radio-button _ngcontent-hqh-c167="" class="mat-radio-button mat-accent ng-star-inserted mat-radio-checked"
id="mat-radio-9">
<label class="mat-radio-label" for="mat-radio-9-input">
<span class="mat-radio-container">
<span class="mat-radio-outer-circle"></span>
<span class="mat-radio-inner-circle"></span>
<input type="radio"
class="mat-radio-input cdk-visually-hidden"
id="mat-radio-9-input"
tabindex="0"
name="selectTv"
value="new">
<span mat-ripple="" class="mat-ripple mat-radio-ripple mat-focus-indicator">
<span class="mat-ripple-element mat-radio-persistent-ripple"></span>
</span>
</span>
<span class="mat-radio-label-content">
<span style="display: none;"> </span>NEW</span></label>
</mat-radio-button>
</mat-radio-group>
</vi-select-tv>
</span>
</section>
I am interested in the radio button with ID mat-radio-8-input, but that ID changes with every new test run.
This is how I identify my radio button group:
#FindBy(how = CSS, using = "mat-radio-group[data-cy='tv-select']")
private List<WebElement> tv;
How can I select the first option of this group?
You can do this:
#FindBy(how = CSS, using = "mat-radio-group[data-cy='tv-select'] mat-radio-button")
private List<WebElement> radioBtns;
To get first item:
WebElement firstRadioBtn = radioBtns.get(0);
You can do this simply by executing a JS code on the page. Just inspect the target page to find a unique selector for the radio button and set selector.checked = true; using js...
For example, if my radio button have id mat-radio-9, I can use js code :- document.getElementById("mat-radio-9").checked = true;
Check Out These Questions :- Executing js code Check a radio button in js

Unable to find element using protactor which have same classes

I have one check box and two links with same classes & same Div.During the automation testing using protractor, i want to click on check box but it click on Links.
i am writing this code but its not working, please provide a solution.
Code:
element(by.id('Remember')).click();
[1
please find HTMl code:-
<div class="input-field">
<div class="pas_rembr">
<input name="remember" id="Remember" class="css-checkbox ng-dirty ng-valid-parse ng-touched ng-not-empty ng-valid ng-valid-required" ng-model="rememberMe" type="checkbox" ng-required="true" required="required">
<!-- <label for="Remember" class="css-label">I agree with the <a class="text_link" target="_blank" ng-href="{{baseUrl}}terms-conditions">Terms & Conditions</a>.</label> -->
<label for="Remember" class="css-label">I have read and I agree with <a class="text_link" target="_blank" ng-href="/lmd/terms-conditions" href="/lmd/terms-conditions">Terms and Conditions</a> and the <a class="text_link" target="_blank" ng-href="/lmd/privacy" href="/lmd/privacy">Privacy Policy</a> of this site.</label>
</div>
<span class="errorForm ng-hide" ng-show="(memberForm.remember.$dirty || submitted) && ((memberForm.remember.$error.required))">
<span class="errorForm ng-scope ng-hide" ng-show="memberForm.remember.$error.required" translate="TERAMS_CONDITION_IS_REQUIRED">Terms and condition is required</span>
</span>
</div>
Try this:-
var el = element(by.css('label[for="Remember"]'));
browser.actions().mouseMove(el, {x: 20, y: 3}).click().perform();
For your tests, the CSS selector would be
element = $$('label.css-label > a:nth-child(2)');
This should be able to click on the second a child of the label element.

change class of glyphicon when nav-item is open

I am using bootstrap menu on a web page.
my menu list looks something like this:
<li><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">main item
<span class="pull-left glyph-btn-menu">
<em class="glyphicon glyphicon-menu-down"></em>
</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
sub item1<br>
sub item2<br>
sub item2<br>
</div>
</li>
I want glyphicon symbol to change to class glyphicon-menu-up when nav-link is clicked and submenu items open and then again to change back to glyphicon-menu-down when nav-item is closed or when a different nav-item is clicked.
What would be the best way to acheive that
So this is my solution.
I gave the parent ul the an id value: id="theme"
bootstrap adds the class open to an open li so I check to see if any li have the class open, remove and add glyphicon classes as needed
$('#theme li').click(function () {
if($(this).hasClass('open')){
//alert('aaa');
$(this).children('a').children('span').children('em').removeClass('glyphicon-menu-up');
$(this).children('a').children('span').children('em').addClass('glyphicon-menu-down');
} else {
$(this).children('a').children('span').children('em').removeClass('glyphicon-menu-down');
$(this).children('a').children('span').children('em').addClass('glyphicon-menu-up');
}
});

Selenium - Not able to Click Dynamically Visible Menu

I have a Menu which have li
(list) elements which gets enabled after you mouse-hover a particular label.
driver.get("www.snapdeal.com"); Actions actions = new Actions(driver);
actions.moveToElement(driver.findElement(By.id("loggedOutAccount"))).build().perform();
//Wait for 5 Secs
driver.findElement(By.className("accountLink")).click();// Here it's throwing Element not visible exception
This code is doing the mouse-hover properly but not able to click the "SignIn Link" Link. Though on manually checking the element is Visible
DOM Structure -
<div id="loggedOutAccount" class="hd-rvmp-logout">
<a class="signIn" href="javascript:void(0);">
<i class="iconHeader accountUser"></i>
<label class="my-account-lang"> My Account</label>
<i class="mar_2_left right-downArrow breadcrumbArrow-down"></i>
</a>
<div class="sdNavDropWrapper accDetails" style="display: none; z-index: 999;">
<ul class="positionAbsolute pull-right">
<li class="customLoggedInState">
<div class="left triangle"></div>
<div class="right triangle"></div>
<div>
<a class="accountLink" href="javascript:void(0);">Click here to sign in ></a>
</div>
</li>
<li class="stop-event">
<li class="stop-event">
<li class="stop-event">
<li class="stop-event">
<li class="stop-event">
</ul>
</div>
</div>
Please use xpath for both element like below :
driver.get("www.snapdeal.com");
Actions actions = new Actions(driver);
actions.moveToElement(driver.findElement(By.xpath("yourxpathhere"))).build().perform();
driver.findElement(By.xpath("yourxpathhere")).click();
I think class/Id repeating for other elements also for style purpose. so Xpath is better to find unique element.

How to Click on a Text in Selenium Webdriver 2.x

I am not able to click on the below HTML values through selenium webdriver click command through Java.
Here's my HTML...I have to click on PAAcctAcctRels, PAAcctActivityData, etc. as in the HTML.
I tried with LinkText (driver.findElement(By.linkText("PAAcctAcctRels")).click();) and xpath (driver.findElement(By.xpath(".//[#id='primaryNavLevel2Z6_G868H4S0K881F0AAEO37LG28N0']/div[1]/a")).click();)
<div id="primaryNavLevel2Z6_0G5A11K0KGF200AIUB98T20G52" class="dropdown_1columns">
<div class="col_1">
<a class="" href="?uri=nm:oid:Z6_0G5A11K0KGF200AIUB98T20G53">
<strong>
<span lang="en" dir="ltr">
PAAcctAcctRels
<span class="wpthemeAccess"> currently selected</span>
</span>
</strong>
</a>
</div>
<div class="col_1">
<a class="" href="?uri=nm:oid:Z6_0G5A11K0KGF200AIUB98T20GD4">
<span lang="en" dir="ltr">PAAcctActivityData</span>
</a>
</div>
<div class="col_1">
<a class="" href="?uri=nm:oid:Z6_0G5A11K0KGF200AIUB98T20GT1">
<span lang="en" dir="ltr">PAAcctAddrEmail</span>
</a>
</div>
Is there any other way to do this..please let me know.
1- For Clicking on text 'PAAcctActivityData', you can use the below code:
driver.findElement(By.xpath("//span[.='PAAcctActivityData']")).click();
2- For Clicking on text 'PAAcctAddrEmail', you can use the below code:
driver.findElement(By.xpath("//span[.='PAAcctAddrEmail']")).click();
NOTE:- The above xpaths will locate thespan elements with exact innerHTML/text as 'PAAcctActivityData' or 'PAAcctAddrEmail', respectively.
By.linkText("PAAcctAcctRels") won't work because that link has more text (ie ' currently selected'), and the problem with your xpath is that is starts with .//
The following should work (I have avoided using * for performance)
By.xpath("//div[#id='primaryNavLevel2Z6_G868H4S0K881F0AAEO37LG28N0']/div[1]/a")
Try using //[#id='primaryNavLevel2Z6_G868H4S0K881F0AAEO37LG28N0']/div[1]/a/span
as xpath. Remove the initial '.' and add '/span' at the end.