CODEWITHSUNDEEP
xpathcss-selectorsui-automationnightwatch.jsnightwatch
Dhruv Bhatnagar
Dhruv Bhatnagar

Reputation: 141

How to select a specific text using CSS selector

enter image description here

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?

Upvotes: 2

Views: 11310

Answers (3)

Eric Hepperle - CodeSlayer2010
Eric Hepperle - CodeSlayer2010

Reputation: 3918

I know its an older post, but it is likely others will come across this answer and find it valuable based on the wording of your post title. I hope this answer can be of help.

So, I don't know anything about Xpath or Nightwatch, but I took at shot at solving this because it looked like you might have access to JavaScript. I played around and came up with this ES6/7/8-flavored "solution":

let textLabels = document.querySelectorAll('.q-text')

for (i=0; i<textLabels.length; i++) {

    let thisLabel = textLabels[i]
    let labelText = thisLabel.innerText
    
    if (labelText.includes("Related")) {
        console.log(`Num: ${i}\t${thisLabel}`)
        thisLabel.style.backgroundColor = 'orange'
    }
    
}

Again, this isn't a direct solution to your problem, but more of proof-of-concept to demonstrate one way you might be able to tackle it.

I don't have the programs you mentioned, so I decided to try it with Quora and Chrome dev tools. In Quora there are all kinds of sneaky adverts clogging the feed, looking like answers to your question, but being something entirely different. They have tags like "Promoted", "Related", etc. But, they don't have any identifying "role" class -- nothing that says "post-tag" or anything intuitive like that (they only have styling classes). But, these tags do have a class of "q-text", so at least that's a starting point.

So, to be able to target these tags, I had to create a simple ES6 script that grabs all the q-text spans, then loops through each one. For each item, we store the DOM element in the "thisLabel" variable, then we store the innerText in the "labelText" variable.

At that point, we check to see if the text contains the string "Related" using the includes() method. So, on Quora, this will find all our tags, plus the sidebar heading of "Related Questions". If we want to filter out that heading and only return spans that have the exact text "Related", then we can use normal equals like this:

if ("Related" == labelText) {
...

BONUS: If we wanted to get the class of the post to highlight those posts by changing the background color, we could use this selector:

.q-box[class*="dom_annotate_question_answer"]

Upvotes: 0

luckyStacker
luckyStacker

Reputation: 11

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;">

Upvotes: -1

cruisepandey
cruisepandey

Reputation: 29362

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.

Upvotes: 1

Related Questions