Finding element using tagname and text (CSS)

Question

We have taken over support for an organization in the company who gets a new release once a year. We did not write the original code.

I entered a name in a search box and got a couple of options (see picture 1). This gives me html as in picture 2. Since I am finding this from a shadow root I need to do findElement(By.cssSelector) rathe than By.xpath(). Picture 1

Previous code was using "mark[.='Anthony Chamberlain']". I do not know whether this works or not. If I use just " mark" as a CSS selector it works fine but will pick the first one, which could be OK or might not. I have tried " mark[.='Anthony Chamberlain']", "mark[ innerText='Anthony Chamberlain'] and " mark[textContent='Anthony Chamberlain']" (I put a space before the mark to do recursive search.

The one where I use ".=" gives me an invalid selector error. The other two just time out and cannot find the element (but the selectors are valid). I have done google searches but am still not clear what to do. If I could use xpath it would be ".//mark[.='Anthony Chamberlain']", but I can't.

Any suggestions of what to do? I would even more like to find the div above it (such as "//div[./mark[. = 'Anthony Chamberlain']]")

I am not sure I correctly uploaded picture 1, but it is an input field with matching selections underneath.

What is the correct css locator? Remember, simply " mark" works fine.

Answer 1

You cannot use css selector to test against node content.

See here for complete documentation : https://drafts.csswg.org/selectors/

If you want to get your mark node, you can use the mark[class*="has-highlight"] css-selector according to the documentation mentioned above. You can then test in js if the result.innerText === 'Anthony Chamberlain'

E[foo*="bar"] syntax : an E element whose foo attribute value contains the substring bar