How to select a specific text using CSS selector - xpath

I want to select the text "Auto-Publish" in Span. How can I do it with a CSS selector? with Xpath I know how to do it. I am using Nightwatch for UI automation. I want to make a generic function in the page object which will take a value as a parameter.
SelectFilterValue(value){
.click(`//span[text()="${value}"]`)
}
I can't do it like this since it's an XPath and I have to specify that it's an XPath. If it was a CSS selector I could do it since I don't have to specify that it's a CSS selector. Or is there is any way that I can do it with Xpath too?

CSS does not have any method like text. So in HTMLDOM, it is not possible at this point of time to locate the element based on text.
Moving further, You could do below in nightwatch.js
.useXpath().click('//span[contains(text(), "' + desiredText+ '")]')
and before calling this assign Auto-Publish to the desiredText variable.

Give a specific id to span tag and then edit css. You can also use inline css which will be the best option.
<span style="color:blue;">

Related

xpath find a CSS attribute from DOM not inline

See my code here of my scenarioI have this scenario and I need to use xpath to validate the image, and the gradient colors are present. I tried all kind of xpath combination but still getting errors or not finding it. Many other samples have the style in-line. In this case has a "." class outside of a close tag. code in the image
Could some offer a hand?your text

How to get only div text not span text using xpath

I am trying to get only order numbers like "190795". check the image
What i have tried
self.driver.find_element_by_xpath('//div[#class="sc-kafWEX ihwrOP"]//div/div/div[3]').text
But it will return span text such as "Order number:190795" like this.
I want only "190795"
This is my HTMl code
That is a text node, you can not write an XPath (v1.0) for that, and Selenium make use of XPath v1.0 , so you will have to be dependent on binding language.
Try this:
org_text = self.driver.find_element_by_xpath('//div[#class="sc-kafWEX ihwrOP"]//div/div/div[3]').text
desired_text = org_text.split(':')[1]
print(desired_text)

WebDriver select element that has ::before

I have 2 elements that have the same attributes but shown one at a time on the page (When one is shown, the other disappears).The only difference between the two is that the element which is displayed will have the '::before' selector. Is it possible to use an xpath or css selector to retrieve the element based on its id and whether or not it has ::before
I bet also to try with the javascript solution above.
Since ::after & ::before are a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML). While the end result is not actually in the DOM, it appears on the page as if it is - you see it but can't really locate it with xpath for example (https://css-tricks.com/almanac/selectors/a/after-and-before/).
I can also suggest if possible to have different IDs or if they in different place in the DOM make more complex xpath using above/below elements and see if it is displayed.
String script = "return window.getComputedStyle(document.querySelector('.analyzer_search_inner.tooltipstered'),':after').getPropertyValue('content')";
Thread.sleep(3000);
JavascriptExecutor js = (JavascriptExecutor) driver;
String content = (String) js.executeScript(script);
System.out.println(content);

How to use Selenium using Xpath to determine the classes of an element?

I am trying to use xpath within selenium to select a div element that is within a td.
What I am really trying to do is determine the class of the div and if it is either classed LOGO1, LOGO2, LOGO3 and so on. Originally I was going to just snag the image:url to determine with logo.jpg was used but whoever made the target website used one image for each logo type and used css to determine which portion of the image will be displayed. So Imagine 4 images on one sprite image. This is the reason why I have to determine the class of the div instead of digging through the css paths.
In selenium I am using storeElementPresent | /html/body/form/center/table/tbody/tr/td[2]/div[3]/div[2]/fieldset/table/tbody/tr[2]/td/div/table/tbody/tr[${i}]/td[8]/div//class | cardLogo .
The div has multiple classes so I am thinking that this is the issue, but any help is appreciated. Below is the target source. This is source from within the table in the tbody. Selenium has no problems identifying all the way up to td[8] but then fails to gather the div. Please help!
<td class="togglehidefields" style="width:80px;">
<div class="cardlogo LOGO1" style="background-image:url(https://www.somesite.com/merchants/images/image.jpg)"></div>
<span id="ContentPlaceHolder1_grdCCChargebackDetail_lblCardNumber_0">7777</span>
</td>
I was fiddling with selenium.getAttribute() but it kept erroring out, any ideas there?
This <div/> element has one class attribute with one value, but this one is tokenized when parsed as HTML.
As selenium only supports XPath 1.0, you will need to check for classes like this:
//div[contains(#class, "LOGO1") or contains(#class, "LOGO2")]
Extend that pattern as needed and embed it in your expression.
With XPath 2.0 and better, you could tokenize and use the = operator which works on a set-based semantics:
//div[tokenize(#class, ' ') = ("LOGO1", "LOGO2")]
Old post but I'll put the solution I used up just in case it can help anyone.
xpath=//div[contains(#class,'carouselNavNext ')]/.[contains(#class, 'disabled')]
Fire of your contains, and then follow with /. to check children AND the current element.

How do I select a href="mailto" tag on a page?

I can use either xpath or CSS, doesn't matter...but there are other a tags on the page. But I just want to use either the first a href=mailto: tag or anyone (there is actually just one, so it doesn't matter the order).
You could use an XPath starts-with function:
mailto = doc.xpath('//a[starts-with(#href, "mailto:")]').first
The standardese is particularly thick in the XPath spec so hopefully the example is clear enough.

Resources