Improve how selectors are generated

[allansson]

What?

The recorder needs to generate robust selectors. The current logic generates selectors that are technically unique but very generic, e.g. a bare a element selector. These selectors are easy to break and don't handle changes to the DOM well.

Ideally we could wait for getBy* support from k6-browser but we currently don't have an ETA on that.

Meanwhile, we need to have something better.

Criteria for considering it closed

Generated selectors should be robust enough to survive most DOM changes.

• They shouldn't rely on bare element tag selectors i.e. h1.
• They should steer clear of class names from popular framewords such as Tailwind or Emotion.
• Ideally they should steer clear of class names that are heavily used in a page.
• Prefer certain attributes and patterns, e.g. data-testid and a[href='/abcdef']