Avoid selecting insertion point indicator via class name in tests

[kevin940726]

What problem does this address?

As seen in some tests:

gutenberg/packages/e2e-tests/specs/editor/various/adding-blocks.test.js

Lines 327 to 330 in e1c3dcf

	// Should show the blue line indicator somewhere.
	const indicator = await page.$(
	'.block-editor-block-list__insertion-point-indicator'
	);

The insertion-point-indicator currently is just a div with a special class name block-editor-block-list__insertion-point-indicator which is an implementation detail.

gutenberg/packages/block-editor/src/components/block-list/insertion-point.js

Line 145 in e1c3dcf

<div className="block-editor-block-list__insertion-point-indicator" />

As discussed in #27260, we should avoid testing implementation details in our tests. Instead, there's often a better alternative, let it be text, aria-label, or other accessible attributes.

What is your proposed solution?

Since the insertion-point-indicator is just a visual cue of where to insert a new block, I can't think of any good accessible attributes for it. I believe we should fallback to the last resort: test IDs. As popularized by RTL, querying by test IDs is a good solution for elements like the insertion-point-indicator.

We can simply add a test ID like to the div like:

-<div className="block-editor-block-list__insertion-point-indicator" />
+<div className="block-editor-block-list__insertion-point-indicator" data-testid="insertion-point-indicator" />

Then we can query it by getByTestId('insertion-point-indicator') or page.$('[data-testid="insertion-point-indicator"]')

[kevin940726]

We can now target the indicator by testid (in Playwright: data-testid=block-list-insertion-point-indicator) since #43798. Some tests haven't been migrated yet though (inserting-blocks and editing-widgets)