I've been developing a new application that's packed with Shadow-roots. Before entering the shadow root, I could use Xpath to locate elements, but once inside the shadow root, I have to switch to CSS selectors. Check out the Root tree image below:
https://i.sstatic.net/bnhcE.png
My goal is to create a CSS selector that can precisely match the button name like this:
div[text='Introduction']
Is it even possible? If so, what would be the correct CSS selector syntax to match the button names?
In the left navigation panel, there are multiple buttons such as Introduction, Summery, and Reports. I'm aiming to write a CSS selector that can parameterize them based on just the button text. This way, using a single CSS selector, I'll be able to click on any of these buttons by passing the respective button text.