How do you use playwright locators to query dynamic css classes?

Question

With Playwright, how can I get element's value based on CSS class path when using React with CSS Modules or with Styled Components? The problem with both that they are generating a static hash, but they are different in different environments (development/staging) and probably will be different after each assets compilation. How can I reliably access the same element on both environment?

Answer 1

One way is to use:

  data-test-id='your-id-name'

As described here.