Trying to automate using selenium for the dynamic classes - javascript

I have a
Button class = "searchbar__SearchButton-sc-1546roh-3 searchbar__CancelButton-sc-1546roh-4 glEceZ"
and trying to return in the browser element using
return browser.element('button[class^="searchbar__CancelButton-"]');
But I see an error that element can't be found.
can someone help me how can I use the element.

According to the CSS selector spec, ^ means
E[foo^="bar"] an E element whose foo attribute value begins exactly with the string bar
In your case, the class string doesn't start with "searchbar__CancelButton-". You need to change the ^ to * to indicate contains.
button[class*="searchbar__CancelButton-"]

Related

Alternative for document in document.getElementById('ID')

I am completely a beginner in java script. As i know, by using this line of code:
document.getElementById('ID').value
It looks in the entire PHP file to find the value of that id (it's a text input). Is there any alternative for the documents on that line of code that let me to search only in a class?
for example i have a class called number, so :
this.block = $("#number");
can i use something like that:
this.block.getElementById('ID').value;
Or there is any another line of code that give me the value of a text input? Thanks a lot
You can use
$("#number").find("#id")
to search descendants of #number.
But if your class is number you should use $(".number") instead since that is the class selector.

Selenium read text of hidden web element using Xpath

I'm facing an issue in one of our automated script wherein I need to read the text of an element whose accessibility is hidden, since selenium can't read text of hidden elements. I checked other posts here as well and they suggest to execute javascript and read innerHTML using the element's ID. In our case the challenge is I can't use ID of the web element as its dynamic and changes each the time the page is loaded in web browser so I'm bound to rely on Xpath's, please find below the code of the element -
<div id="milestone_gwt-uid-2132" class="accessibilityhidden">Current Step: Referral Details</div>
Now id i.e. "milestone_gwt-uid-2132" is not static and changes whenever the page is loaded and I want to read the text - "Current Step: Referral Details". Is there any effective way to do that using Selenium Java?
Thanks
The method getText returns the visible text. Use executeScript to get the hidden text:
WebElement elem = driver.findElement(By.xpath("//div[contains(text(), 'Current Step:')]"));
String hiddenText = (String)((JavascriptExecutor)driver).executeScript(
"return arguments[0].textContent;", elem);
Note that assessing some hidden text in a test is probably a bad idea since it doesn't reflect what the user can see.
You can use dynamic id in your XPath in following way:
//div[contains(#id, "milestone_gwt-uid-")]
You can get innerHTML with following code
WebElement element = driver.findElement(By.xpath('//div[contains(#id, "milestone_gwt-uid-")]'));
String contents = (String)((JavascriptExecutor)driver).executeScript("return arguments[0].innerHTML;", element);
Thanks! Works with MS Word Online!!
calling the method:
String textFromEditor = getValue(driver.findElement(By.id(editorFieldId)));
the body of method:
protected String getValue(WebElement element) {
try
{
String value = (String)((JavascriptExecutor) driver).executeScript("return arguments[0].textContent;", element);
return value;
}
catch (Exception e)
{
return "can't get text";
}
}
You can assert the element by concatenating two Texts since the DOM will always contain a unique element.

JS - querySelector returns an illegal or invalid string error - but valid string for class name in console.log

I have the below code:
var parentdepth=depth-1;
var parentclass=classes[parentdepth];
console.log(parentclass); // prints 0-check
//el=e.querySelector('.'+parentclass);
console.log(parentclass); has no problem and prints the parent class name, but when I command the el=e.querySelector('.'+parentclass);, below error appears:
SyntaxError: An invalid or illegal string was specified
Note that console.log(e) is <section class="to y-12 y-3 0-check">.
Also, note that my goal is to append a child inside the class which matches 0-check in its name.
Your class name starts with a digit, and the CSS parser doesn't like that digit starting the class name in the selector string. You can use such a class name, but you'll need to express it differently, specifically as the JavaScript string "\\40-class". That'll result in the CSS selector parser seeing .\40-class, and that will not cause an error. It will correctly match an element like
<span class=0-check>Hello World</span>
It's interesting to note that the HTML markup itself will not cause an error, because the HTML parser doesn't care what the attribute value looks like.
From your question, it seems that you might be trying to test whether an element matches the selector. If so, then .querySelector() is not the API to use anyway; you want .matches() (which in older browsers was prefixed and called "matchesSelector"). So,
var matches = e.matches("." + parentclass);
That function returns a boolean.

How to find a value of an attribute of an element

Here is a piece of code
<span class="balance themecolor" data-balance="2800">
I'm looking for a way to extract the value of data-balance and set it as variable x, but I have absolutely no idea how to do it. I know of the existence of .val() but I don't know if I can apply it to this code. I'm looking a for a one line long solution.
If you're using jQuery (as you've mentioned .val()):
var x = $("[data-balance]").attr("data-balance");
Or if you aren't:
var x = document.querySelector("[data-balance]").getAttribute("data-balance");
In both cases, the [data-balance] is a CSS selector for the element; adjust as needed. For instance, with that element, and assuming no other elements with either of its classes, you could use .balance, .themecolor, or even .balance.themecolor.
jQuery will find all elements matching the selector (you can change that if it's an issue, usually it isn't), but then only give you the attribute value for the first one.
querySelector will stop with the first one. If you want to find them all and get a list, use querySelectorAll (and then index into it to get the individual ones).

Javascript of Joomla with $E is Not defined?

hmmmm....
I'm abit confused.
i have a module taken from the earlier of joomla 1.5
that I tried to implement it inside joomla 1.6.
When I tried to refresh my page,
it will always generate this error;
$E is not defined
Source File: http://localhost/p.net/templates/jabellatrix/scripts/ja.collapsible.js
Line: 13
What is that?? I dunno.
Whether it is a mooTools problem or jquery problem i dunno.
Is there anyone could share a bit of words about this?
anyway here comes the javascript source code that's mentioned above; Source Code Link.
it means, you have old code. $E is from mootools 1.1x and it refers to document.getElement("selector"); to return the first matching element. you can either go:
$E = document.getElement; in the hope it makes it compatible or look at another collapsible script that is more up-to date. chances are - this wont be the only breaking api change.
the full code was:
/*
Function: $E
Selects a single (i.e. the first found) Element based on the selector passed in and an optional filter element.
Returns as <Element>.
Arguments:
selector - string; the css selector to match
filter - optional; a DOM element to limit the scope of the selector match; defaults to document.
Example:
>$E('a', 'myElement') //find the first anchor tag inside the DOM element with id 'myElement'
Returns:
a DOM element - the first element that matches the selector
*/
function $E(selector, filter){
return ($(filter) || document).getElement(selector);
};

Categories