クリックしたDOM要素の Playwright Locator を生成する

https://github.com/mizchi/selector-generator

簡単な使い方

import { createSelectorGenerator, toLocator } from "@mizchi/selector-generator";

const generateSelector = createSelectorGenerator(window);
const selected = generateSelector(document.querySelector("div"));

与えられたDOM要素が、レイアウト上どのようなパスでたどり着けるかを解析して、その要素を Playwirght が選択するための locator コードを生成します。

生成されるコードの例。

page.locator('html')
page.getByText('Click on the links above to')
page.getByText('xxx')
page.getByText('bbb')
page.getByRole('button', { name: 'role-button' })
page.getByRole('button', { name: '#btn' })

内部的には id, aria属性, ユニークなCSSセレクタ、テキスト要素等で一番それっぽいものを優先的に返します。

E2Eコードを自動生成するために使う想定です。Chrome DevTools > Recoder で同じことができますが、そのJS版です。

実践的な使い方

import { createSelectorGenerator, toLocator } from "@mizchi/selector-generator";

const generateSelector = createSelectorGenerator(window);

window.addEventListener("click", (e) => {
  // Only with alt+click
  if (e.altKey) e.preventDefault();
  const found = generateSelector(e.target as HTMLElement);
  const locator = toLocator(found.selector, "javascript");
  console.log(`page.${locator}`);
});

便利に運用するためには、アクセシビリティを意識する

常に一意なコードを生成できるわけではありません。DOMの変更に強いセレクタにするには、アクセシビリティ視点で有意な手がかりがある必要があります。

具体的にはこういう感じのことです。

• ユニークな要素にユニークな id を付与
• 識別可能なユニークな class を付与
• セマンティックな要素(section, main, article等)を指定
• role 属性を指定
• role-aria 属性を指定
• data-testid を指定

こういうことを頑張ると壊れにくくなります。