Toolbar Heatmap & Inspect improvement

[mariusandra]

Changes

• This PR fixes a bunch of tiny issues with element selection
• It also upgrades Simmer to a version that uses [data-attr] in its generated selectors when available.

---

Before:

After:

---

Before:

After:

---

Before:

After:

---

Before:

After:

---

Before:


After:

Checklist

• All querysets/queries filter by Team (if this PR affects any querysets/queries)
• Backend tests (if this PR affects the backend)
• Cypress E2E tests (if this PR affects the front and/or backend)

[mariusandra]

The tests finally pass! (I'm not sure if I did anything TBH...)

Thus this is ready for a review. I updated the original task description with various screenshots of what gets fixed with these changes. Posthog.com looks quite good under the toolbar now!

To elaborate on one change:

"It also upgrades Simmer to a version that uses [data-attr] in its generated selectors when available."

We use data-attr a lot with cypress tests to help hook onto the right elements:

... and I believe it's a very useful and powerful abstraction, as it separates style from meaning. We can add subtle hints in the app that help us efficiently automatize software without relying on CSS id and class attributes.

This change basically lets simmer hook into data-attr attributes. Whereas before it would go p:nth-child(30) a:nth-child(2) or so:

If you add data-attr, you can now go like this:

This can make your designs future proof.

Technically, yes, you could add a very unique id to the attribute, but that has various issues that I won't get into now...

It's especially apparent in the posthog app:

Before:

After:

Is this a controversial change... or is this something cool? It is totally optional to add these data-attr of course and we must make sure autocapture works really well under all situations.

[timgl]

I think above makes a lot of sense and we should really push people to add data-attr attributes everywhere if they want a robust implementation. Will have a test

[mariusandra]

@yakkomajuri - I think this PR has some implications for the docs.

[yakkomajuri]

Yup, will document how the Toolbar finds elements and how using data-attr is the suggested way for a better toolbar experience

[mariusandra]

Great, thank you! Just to add, please emphasize that data-attr is optional. I really don't want people to walk away with the false impression of "posthog won't work until I add this special attribute everywhere".

Here's some (raw) text that could be of help:

When you create an action to track the usage of a button, PostHog creates a unique CSS selector that pinpoints it, taking into account all unique tags, classes and IDs. Yet the accuracy and reliability of this selector will always depend on your site's markup.

If the best unique selector for a button is div.ant-col.ant-col-xs-8.ant-col-sm-8.ant-col-md-6.ant-col-lg-6.ant-col-x1-6:nth-child(3) > a, you can run into problems. For example, how can you guarantee that :nth-child(3) will still point to the same element? What if .ant-col-sm-8 changes to .ant-col-sm-6 after some design feedback?

To solve this, you can provide additional hints with data-attr.... (+ description)