feat: no-layout-selector

[codejedi365]

Feature Request

If Selector() is used and a css property is used to locate the element, make sure it isn't related to page layout since page layouts change all the time.

Problem & Goal

If you use multiple selectors to narrow down and ensure the component is selected then it is likely heavily coupled to a particular page layout. Page layouts can change rapidly leading to brittle test cases or misinterpreted results.

Encourage use of more specific selectors for the page using only 1 css child selector. A child selector is a space ( ) or a > between selectors.

Expected behavior

// page.test.js - invalid example
await t.typeText('.topWindow .banner > [data-test="search"]', 'Batman')
await t.expect(Selector('.table .tableRows td [data-test="name"]').value).eql('Batman');

# Run Lint
eslint ./tests/page.test.js

Should return an warning on line 1 & 2, highlighting the 1st parameter string of typeText() & Selector(...). Recommend using more specific css selectors which do not rely on the page layout to find the element. It is recommended to use the testing-library and page model abstraction for the best durability of selecting elements on the page.

No Layout Selectors

// page.test.js - valid example
await t.typeText('[data-testid="user-search"]', 'Batman')
await t.expect(Selector('table [data-testid="name"]').value).eql('Batman');

RECOMMENDED: Page Model & Testing-Library

// tests/model/page.js
//import {} from "@testing-library"
//incomplete

// page.test.js - desired implementation
import { t } from "testcafe"
import { page } from "./models"

test('Search for a name and find valid result', async t => {
    await page.submitName('Batman');
    await t.expect(page.table.userName.innerText).eql('Batman');
});