I am busy using Selenium on SSRS reports.
I am struggling with a specific element within a menu which I cannot get to interact with
Here is a html snippit.
</div><div class="DisabledButton">
<a title="Excel" class="ActiveLink" onclick="$find('ctl31').exportReport('EXCEL');" href="javascript:void(0)" style="padding: 3px 8px 3px 32px; display: block; white-space: nowrap; text-decoration: none;">Excel</a>
</div>
I tried using the following to find the element:
* Using getcssSelector
* Using linkText
Is there a solution for this?
Steps to get the xpath from chrome:
Right click on the element on the webpage and click inspect
The HTML for the element should be highlighted
Right click on the highlighted section
Hover over 'copy'
Click Copy xpath
Then to find the element use:
WebElement element = driver.findElement(By.xpath("Paste Xpath here"));
To click on it then:
element.click();
Related
I'm having two div's which are having same css, only difference is the style is having display:block and none.
<div class="autocomplete-suggestions " style="left: 91px; top: 333px; min-width: 747px; display: none;">
<div>item1</div>
<div>item2</div>
</div>
<div class="autocomplete-suggestions " style="left: 91px; top: 333px; min-width: 747px; display: block;">
<div>item3</div>
<div>item4</div>
</div>
How we could identify the which element is having the style display block or none in Protractor?
I need to click item3 div which is reside with display:block div.
I have tried the below code.
browser.findElements(by.css('.autocomplete-suggestions')).then((autoSuggestions) => {
autoSuggestions.map((item) => {
if (item.isDisplayed()) {
item.getTagName().then((x) => {
console.log('tagname', x);
});
browser.pause();
//item[index].click();
}
})
from the above code i can see both div's.
I'm receiving 'could not find element 'click on undefined' error.
I'm trying end to end testing with Anuglar 7, protractor, jasmine and selenium web driver.
You need to filter your expression to take into consideration the style attribute.
You might find XPath selector easier to write/read/understand, you can use XPath contains() function to select only div which has display: block in the style attribute would be:
//div[contains(#class,'autocomplete-suggestions') and contains(#style, 'display: block')]/div[1]
Demo:
If you would like to stay with CSS selectors the equivalent expression will be:
div[class*="autocomplete-suggestions"][style *= "display: block"] >:nth-child(1)
If you're looking for an option using CSS as locator then you can use this
element(by.cssContainingText(".autocomplete-suggestions[style*='display: block'] div", "item3"))
So I'd like to make the select tag dropdown look like a normal text link, but when clicked have it still activate ionics select (mobile dropdown) feature.(http://ionicframework.com/docs/components/#select)
This plunkr down below shows the look of the dropdown box I don't want. Can anyone help me turn the dropdown box into a text link please!
<select ng-model="myColor" ng-options="color.name for color in colors"></select>
https://plnkr.co/edit/A9ycYBKC1GUDhpCiskr5?p=preview
Adding the following to your plunker works:
<style>
select{
-webkit-appearance:none;
outline: none;
border: none;
background: none;
color: blue;
text-decoration: underline;
}
</style>
One possibility is to remove the select entirely and mock it using an unordered list. Example.
Link
<ul ng-if="show">
<li ng-repeat="color in colors">
{{color.name}}
</li>
</ul>
I have an app running in an iframe and it makes use of angular ui boostrap tooltips. Unfortunately if the element with the tooltip is on the edge of the iframe, the tooltip will be cutoff by the iframe. Is there any solution to this? Should I play with its position within the iframe, or the z-index value?
UPDATE
So I'm trying to override the tooltip positions (note that I an using angularjs ui bootstrap). I have 2 tooltips which each require their own positioning. I managed to change the css styles (colours and fonts) globally, but I'm having trouble targeting each one to give them unique positions. I have the following html and css:
<div id="my-div">
<ul>
<li tooltip="Foo">A</li>
<li tooltip="Bar">B</li>
</ul>
</div>
Tooltip "Foo" needs a different position that "Bar". So I'm trying to access the li tags using the following css, but it doesn't work.
#my-div > ul > li:nth-child(1).tooltip.top {
margin-left: 10px;
}
#my-div > ul > li:nth-child(2).tooltip.top {
margin-left: 30px;
}
Note that .tooltip.top is the bootstrap class added via the angularjs tooltip directive. I'm guessing this doesn't work because the directive is actually adding another element somewhere.
So it turns out angular will insert a div element right after the element defined as the tooltip. So in my case, when the tooltip event for A is triggered, angular inserts the new element like so:
<div id="my-div">
<ul>
<li tooltip="Foo">A</li>
<div><!-- tooltip for foo --></div>
<li tooltip="Bar">B</li>
</ul>
</div>
Therefore the solution I came up with was to add id's to each of my li tags:
<li id="foo-tip" tooltip="Foo">A</li>
<li id="bar-tip" tooltip="Bar">B</li>
and then access the css tooltip element like so:
#foo-tip + div {
margin-left: 25px;
}
#bar-tip + div {
margin-left: 15px;
}
I'm using Ionic Framework to develop a mobile application for Android.
My issue is that I need to have a list of containers at random positions and are able to be clicked.
The list of containers are displayed correctly at the random positions but the click areas only work when i click at the top of the view, not at the position itself.
The clicking works fine in the mobile browsers at the correct position but when I run the app as a native application in Android, the clicks messed up.
It seems like clicking areas are lined up at the top of the view, does anyone know what is causing this?
The codes are here:
HTML file
<div class="col" ng-model="qtablelayout">
<div qtable ng-model='qtable' ng-repeat='qtable in qtablelayout.qtables' class="tablediv" ng-class="qtable.tstatus" ng-style="{'left': {{qtable.x}}+'px', 'top':{{qtable.y}}+'px'}" ng-click="tblActions(qtable)">
<h2>{{qtable.tableNo}}</h2>
<ul>
<li class="tablesize">{{qtable.currentHP.qsize}}/{{qtable.maxSize}}</li>
<li class="tabletime">{{qtable.tabletime.hours}}h {{qtable.tabletime.mins}}m {{qtable.tabletime.secs}}s</li>
</ul>
</div>
</div>
CSS file
div.tablediv
{
position: absolute;
background: url("../img/table/tablestatus.png") no-repeat;
color: #fff !important;
width: 178px;
height: 178px;
padding: 0;
margin: 0;
text-align: center;
display: block;
overflow: hidden;
}
The Controller side
$scope.tblActions = function(m)
{
alert("x:" + m.x + ",y:" + m.y);
}
I found out the cause of the problem is that I had an Ion-Refresher before the list of containers and it seemed to have shifted up the clicking areas together with the space for the Ion-Refresher.
It worked when I put the Ion-Refresher at the bottom of the HTML.
Is there a way to click on the background image which is defined in the CSS but not part of the html tag? I need to click on the div tag that has #class=hitLocation.
<ul id="uxFolderTree_uxFolderTree_template_TreeRootElement" class="ui-tree-root">
<li class="-ui-tree-branch -ui-tree-folder -ui-tree-type-root collapsible" data--selectionmode="None" data-level="0" data-path="0" data-rootid="0" data-parentid="0" data-id="0">
<div class="hitLocation">
the CSS is
.ui-tree .ui-tree-branch.collapsible > .hitLocation {
background-image: url("/WorkArea/FrameworkUI/images/icons/plus.png");
background-position: 0 center;
cursor: pointer;
Not directly, no.
You can either:
simply click the hitLocation element. WebDriver implicitly clicks into the center of the element, so it might be good enough.
Use Advanced Interactions API and specify at which location in the element you want to click.
For example, this clicks at position [1,1] counting from the top-left corner of the hitLocation element.
WebElement hitLocation = driver.findElement(By.className("hitLocation"));
new Actions(driver)
.moveToElement(hitLocation, 1, 1)
.click()
.perform();