search

DevExpress / testcafe

A Node.js tool to automate end-to-end web testing.
https://testcafe.io
MIT License
9.82k stars 670 forks source link

CSS Selector improvement by adding a configurable prefix for easier element selection #8290

Open cocoon-it opened 1 week ago

cocoon-it commented 1 week ago

What is your Scenario?

We are developing web applications using the Sencha framework, where element IDs can change upon rebuild. As a result, we use CSS selectors to identify components in our test scenarios. However, when using TestCafe Studio, it only offers a single class or partial match on the class attribute. Our testers have no knowledge of the internal structure of our application, making it difficult for them to choose the correct elements. To simplify this, we added specific classes that start with 'js-test-...' (e.g., 'js-test-main-menu-button') to our components. Despite this, these classes often do not appear in TestCafe Studio's selection options.

What are you suggesting?

It would be helpful if there were a way to configure a prefix for classes, such as 'js-test-...', and have these classes appear as preferred options in the available CSS selectors. For example, instead of getting 'x-input-el.nth(90)' or '^x-component x-button x-has-icon x-icon-align-left x-arrow-align-ri', I would get 'js-test-main-menu-button' if the element has the class directly, or 'js-test-main-menu-button .x-button-el' if I want to target an element within the specified class

What alternatives have you considered?

Currently, our testers create the tests using TestCafe Studio, and a developer manually converts them by reviewing the replay and rewriting the test in JavaScript using the correct JS classes.

Additional context

No response

PavelMor25 commented 1 week ago

Hello @cocoon-it,

I believe that this enhancement might not be necessary. You can use attribute selectors to specify the class in the Element Selectors. They are quite flexible and will allow you to select the class you need.

For example, you could use a selector like this:

[class^="js-test-"]

This will allow you to specifically target elements with class names that start with js-test-.

Also, TestCafe Studio can generate selectors that reference custom HTML attributes. Instead of using a class, you can add custom HTML attributes and configure selector generation rules accordingly. Please refer to the following help topic to learn more about how to add a custom attribute: Add a Custom Attribute.

If you have any questions about TestCafe Studio in the future, feel free to reach out to our Support Center.

Let us know if this helps.