I am trying to determine if my Selector is capturing the correct HTML elements. The only thing that is being outputted is the Selector object which doesn't tell me anything.
I tried to put a debugger in VScode and use the console to view the Selector.
For example if I have this HTML,
<html>
<body>
<h1>This is a test</h1>
</body>
</html>
and my Selector is as followed...
const h1 = Selector('h1');
Is there a way for me to see the HTML of the captured element? Eg; have to output
<h1>This is a test</h1>?
Debugging a Selector object in debug mode is quite difficult.
The best way I found to check if a Selector is correct is to hover over it before doing any action or assertion:
const h1 = Selector('h1');
await t
.hover(h1)
...
Then you should see the big cursor moving and hover over the selector.
Related
I'm using angular2 and bootstrap4. Popover correctly renders raw html as bold text asdf
<img src="assets/images/1.jpg"
data-container="body" data-toggle="popover" data-html="true" data-placement="top"
[attr.data-content]="getM()"/>
However, tooltip renders as plain <b>asdf</b> text including tags
<img src="assets/images/2.jpg"
data-container="body" data-toggle="tooltip" data-html="true" data-placement="top"
[attr.title]="getM()"/>
Component method getM:
public getM(): string {
return '<b>asdf</b>';
}
Both tooltip and popover are initialized the same way
$(function () {
$('[data-toggle="tooltip"]').tooltip({container: 'body'});
$('[data-toggle="popover"]').popover({container: 'body'});
})
Could someone explain why is that and how to solve? It seems this is connected with initialization order, but I just don't know where to look further.
Well, the issue was that my element (which tooltip was attached to) was created dynamically.
In exact, I had a 1 sec delayed service. When new data arrived, the <img> element in my component was recreated, but $('[data-toggle="tooltip"]') selector doesn't work with dynamic elements.
Instead, I had to use this selector
$("body").tooltip({selector: '[data-toggle="tooltip"]'});
Now it works as intended.
PS I'm not a front-end developer, so anyone who can explain it in better terms is welcome.
I am doing a exercise with client java to use cssSelector method to retrieve some objects having a particular web element's CSS property.
The statement
driver.findElements(By.cssSelector(".item-result .content-main .block-opening"))
returns all elements from page using the class ".item-result .content-main .block-opening" (refer to my blocks below) and all is fine up to there!
Nevertheless, I only want those which have a property text-indent whose value is -999em. To perform it, I first use
driver.findElements(By.cssSelector(".item-result .content-main .block-opening[text-indent]"))
to retrieve all elements having a text-indent css property but I realize that no element is matching while I have text-indent property inside my css block.
HTML block
<html id="ng-app" data-ng-app="rwd" data-ng-controller="AppCtrl" lang="fr" class="ng-
scope">
<head>...</head>
<body>
...
<span class="block-opening icon-time-filled ng-scope" data-ng-if="bloc.openClosed ==
'O'">Ouvert</span>
...
</body>
</html>
CSS block
.item-result .content-main .block-opening {
width: 25px;
color: #a1a1a1;
text-indent: -999em;
}
I was hoping to find exactly what i want to by the use of
driver.findElements(By.cssSelector(".item-result .content-main .block-opening[text-indent='-999em']"))
Since elements related to text-indent are not found, I am blocked to find those having text-indent to -999em.
Please any help would be appreciated!
Perhaps a little bit of a longer route but you could try getting a list of all the elements and checking the css-properties, with the appropriate method.
List<Webelement> elements = driver.findElements(By.cssSelector(".item-result .content-main .block-opening"));
for (Webelement element : elements) {
if (element.getCssValue("text-indent").equals("-999em")) {
return element;
}
}
Caveat, I've never tried to get the text-indent value, as such I can't guarantee that the above will work.
http://selenium.googlecode.com/git/docs/api/java/org/openqa/selenium/WebElement.html#getCssValue(java.lang.String)
You can locate that element using xpath using inner text value
By.xpath("//span[text()='Ouvert']")
I have an application developed in Liferay. It has a data grid which has pagination.
When ever i open the data grid for the first time Prev is not clickable and Next is clickable. Below is the html code for the same.
<section class="paginationArea">
<div id="pager">
<span id="prev" class="disablehyperlink"><< Previous Page</span>
<span id="next" class="enablehyperlink">Next Page >></span>
</div>
</section>
Please let me know how can i check whether that text is clickable or not??
You can always check it for a class attribute (assuming class change will cause enabling the button). You didn't specify a language so I will show you example in Java.
Element prevButton = driver.getElement(By.id("prev"));
if(prevButton.getAttribute("class").equals("disablehyperlink") {
// do something
}
or you can try WebDriver#isEnabled method but I don't know whether it will work because it depends how are you disabling the button
if(prevButton.isEnabled()) {
}
Generally, all the <a> anchor Tags will be clickable.
In your case, Prev is not clickable. Because prev [previous in paginator] is hidden; where else Next [next in paginator] is not hidden(enabled).
Use Firebug [firefox add-on] to track all the hidden anchor tags | href links and code accordingly.
I've got a very simple function, of replacing the innerHTML of a element. I've been trying to debug this for hours but simply can't, and it's infuriating.
When called from a button press the JavaScript (as follows) works well, but when called from another function it doesn't work. I am totally lost as to why this might be, and its a fairly core part of my app
// This loaded function in my actual code is a document listener
// checking for when Cordova is loaded which then calls the loaded function
loaded();
function loaded() {
alert("loaded");
changeText();
}
function changeText() {
alert("started");
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
Button press and HTML to replace
<div id="main">
<input type='button' onclick='changeText()' value='Change Text'/>
<p>Change this text >> <b id='boldStuff'> THIS TEXT</b> </p>
</div>
It is also here in full on JSFiddle
You are already changed the innerHTML by calling the function loaded(); on onLoad.
Put this in an empty file and same as .html and open with browser and try. I have commented the function loaded();. Now it will be changed in onclick.
<div id="main">
<input type='button' onclick='changeText();' value='Change Text'/>
<p>Change this text >> <b id='boldStuff'> THIS TEXT</b> </p>
</div>
<script>
//loaded();
function loaded() {
alert("loaded");
changeText();
}
function changeText() {
alert("started");
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
The problem here is, that the element you're trying to manipulate is not yet existing when you are calling the changeText() function.
To ensure that the code is only executed after the page has finished loading (and all elements are in place) you can use the onload handler on the body element like this:
<body onload="loaded();">
Additionally you should know, that it's very bad practice to manipulate values by using the innerHTML property. The correct way is to use DOM Manipulations, maybe this can help you.
You script loads before the element (boldStuff) is loaded,
Test Link - 1 - Put the js in a seperate file
Test Link - 2 - put the js at the very end, before closing the <body>
I'm trying to add id to a element using dojo.query. I'm not sure if it's possible though. I trying to use the code below to add the id but it's not working.
dojo.query('div[style=""]').attr("id","main-body");
<div style="">
content
</div>
If this is not possible, is there another way to do it? Using javascript or jquery? Thanks.
Your way of adding an id to an element is correct.
The code runs fine for me in Firefox 17 and Chrome 23 but I have an issue in IE9. I suspect you may have the same issue.
In IE9 the query div[style=""] returns no results. The funny thing is,it works fine in compatibility mode!
t seems that in IE9 in normal mode if an HTML element has an inline empty style attribute, that attribute is not being preserved when the element is added to the DOM.
So a solution would be to use a different query to find the divs you want.
You could try to find the divs with an empty style attributes OR with no style attribute at all.
A query like this should work:
div[style=""], div:not([style])
Take a look at the following example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.8.2/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.NodeList-manipulate");//just for the innerHTML() function
dojo.addOnLoad(function () {
var nodeListByAttr = dojo.query('div[style=""], div:not([style])');
alert('Search by attribute nodeList length:' + nodeListByAttr.length);
nodeListByAttr.attr("id", "main-body");
var nodeListByID = dojo.query('#main-body');
alert('Search by id nodeList length:' + nodeListByID.length);
nodeListByID.innerHTML('Content set after finding the element by ID');
});
</script>
</head>
<body>
<div style="">
</div>
</body>
</html>
Hope this helps
#Nikanos' answer covers the query issue, I would like to add, that any query returns an array of elements, in case of Dojo it is dojo/NodeList.
The problem is you are about to assign the same id to multiple DOM nodes, especially with query containing div:not([style]). I recommend to use more specific query like first div child of body:
var nodes = dojo.query('body > div:first-child');
nodes.attr("id", "main-body");
To make it more robust, do not manipulate all the nodes, just the first node (even through there should be just one):
dojo.query('body > div:first-child')[0].id = "main-body";
This work also in IE9, see it in action: http://jsfiddle.net/phusick/JN4cz/
The same example written in Modern Dojo: http://jsfiddle.net/phusick/BReda/