Version
5.3.0
Link to Minimal Reproduction
https://codepen.io/nani554/pen/WNdRBzR
Steps to Reproduce
- Create any chart, lets say bar chart and render it in SVG.
- Have Title whose text(Mon) is similar to one of the labels text(Mon).
please refer codepen for chart example:
https://codepen.io/nani554/pen/WNdRBzR
Current Behavior
- What i need is to click on label text, so i have formed a selector using text value and want to click on label text programatically but its not happening because in dom we have multiple text elements with same text value, which are "Label text" and "Title text".
- Currently there is no way to form a unique selector as every text is present in text element and its parent in "g" element with its parent as "svg" element.
- This is the selector im using:
selector:"body svg text:contains('Mon')"; - Im using cypress to query selector and do click event.
please refer below images for reference.
UI:
DOM:
Soo Currently Im not able to click on label text with that selector.
Expected Behavior
Please suggest me a way for me to form a unique selector for label text or title text or legends.
let me know if i can add id or class attributes to text element, so that i can uniqely select that element and do operations on it.
Thank you.
Environment
- OS: Windows 7 - 10.
- Browser: Chrome 99.0.4844.82 (Official Build) (64-bit)
- Framework: Angular@11.2.14Any additional comments?
No response
3条答案
按热度按时间rekjcdws1#
If you hope to listen to the events of axis labels, it's suggested to use
chart.onAPI instead of attempting to fetch the generated element. Refer to #16500 (comment) for more information.a2mppw5e2#
My case is not about listening to event but clicking on specific element in cypress environment (automation).
Example:
cy.get('.btn').click()https://docs.cypress.io/api/commands/click#Syntax
So here whats happening is, im clicking on a element which has class "btn". So similarly i need a unique selector to click on axis label.
y3bcpkx13#
Actually If I understand the question correctly we need an ability to uniquely identify and target a specific DOM element in the so that we can click on the exact element based on the unique selector we can form.
Currently I don't see a way if we can assign some id's or css classes to the svg elements so that they can be leveraged to target a specific DOM element using dom selectors.
It would be a very useful thing especially from the automation standpoint.