Enforce single data-test-subj

[nickofthyme]

The idea of a data-test-subj it for precise element targeting in complex UIs. This should function much like the id attribute, meaning that it only has a single value (i.e. no spaces) and excluding the uniqueness requirement. There should be no reason to include modifiers in the data-test-subj for the same element in order to change its behavior. Changing behavior should be done with an additional attribute to modify the behavior.

Case in point, the example below uses the test subject of kbnAppWrapper [modifier] even though both visibleChrome and hiddenChrome, when visible, will point to the same DOM element.

test.describe('Maps', () => {
  test('Full screen mode', async ({ page }) => {
    // ...
    const visibleChrome = page.getByTestId('kbnAppWrapper visibleChrome');
    const hiddenChrome = page.getByTestId('kbnAppWrapper hiddenChrome');

    await expect(visibleChrome).toBeVisible();
    await expect(hiddenChrome).not.toBeVisible();
  });
});

Instead, the more canonical approach would be to get the element and test if it has the correct attributes.

test.describe('Maps', () => {
  test('Full screen mode', async ({ page }) => {
    // ...
    const kbnAppWrapper = page.getByTestId('kbnAppWrapper');

    await expect(kbnAppWrapper).toBeVisible();
    await expect(kbnAppWrapper).toHaveAttribute('chrome', 'visible');
  });
});

Given this I see no good reason to allow multiple test subject ids on the same element. For example...

<div data-test-subj="foo bar">Desired element</div>

I'm open to other reasons why multiple test ids would be appropriate but I cannot think of any.

[elasticmachine]

Pinging @elastic/kibana-operations (Team:Operations)