Playwrightのchainning selectorsを少し詳しく

最初に書いたPlaywrightで、なんかChainning Selectorの挙動説明と違ってようわからんという言及をしてました

サンプルだとQuerySelectorを繋げてるのと等価だよって書いてあるけど aタグ4つくらい絞った中から、子要素だけじゃなく、そのaタグ自体の要素に対して絞り込みができるような挙動もある気がするから 厳密には違う気がするけど要調査。どうなんでしょうね

結論から言うと、基本QuerySelectorを繋げてるのと等価で、コレクション帰ってくる場合は最後にとれた要素を親にして繋げるけど
*をつけるとコレクションすべての要素に >> の後ろのセレクタを適用するよ。という挙動でした。

なんか挙動説明と違うとか抜かしたけど当然そんなことなく、
公式ドキュメントに書いてあります。それ読めばすべて解決 。intermediate-matchesってとこ読みましょう playwright.dev

ということで、以下のようなコードを用意して挙動見てました。(テンプレート作成でできたコードをちょっと変えたやつ)

import { test, expect, Page } from '@playwright/test';

test.beforeEach(async ({ page }) => {
  await page.goto('https://demo.playwright.dev/todomvc');
});

const TODO_ITEMS = [
  'buy some cheese',
  'feed the cat',
  'book a doctors appointment'
];

test.describe('New Todo', () => {
  test('should allow me to add todo items', async ({ page }) => {
    // Create 1st todo.
    await page.locator('.new-todo').fill(TODO_ITEMS[0]);
    await page.locator('.new-todo').press('Enter');
    // Create 2nd todo.
    await page.locator('.new-todo').fill(TODO_ITEMS[1]);
    await page.locator('.new-todo').press('Enter');
    // Create 3rd
    await page.locator('.new-todo').fill(TODO_ITEMS[1]);
    await page.locator('.new-todo').press('Enter');

    // Complete
    const firstTodo = page.locator('.todo-list li').nth(0);
    await firstTodo.locator('.toggle').check();

    var noFilterd =  (await page.locator('.todo-list li'))
    var filterd =  (await page.locator('.todo-list li.completed'))
    var chainSelector =  (await page.locator('.todo-list li >> .completed'))
    var selectorOfSelector = (await page.locator('.todo-list li').locator('.completed'))
    var textFilter =  (await page.locator('text=feed the cat'))
    var textFilter2 =  (await page.locator('text=text=buy some cheese'))
    var chainTextFilter =  (await page.locator('.todo-list li >> text=feed the cat'))
    var chainTextFilter2 =  (await page.locator('*.todo-list li >> text=buy some cheese'))

    var anoFilterdText = await noFilterd.allInnerTexts()
    var afilterdText = await filterd.allInnerTexts()
    var achainSelectorText = await chainSelector.allInnerTexts()
    var aselectorOfSelectorText = await selectorOfSelector.allInnerTexts()
    var atextFilterText = await textFilter.allInnerTexts()
    var atextFilter2Text = await textFilter2.allInnerTexts()
    var achainTextFilterText = await chainTextFilter.allInnerTexts()
    var achainTextFilter2Text = await chainTextFilter2.allInnerTexts()
   
    await page.waitForTimeout(4000) // ここにブレークポイント置くと見やすい
  });
});

テキスト抜くのめんどかったんで、結果は以下のデバッグウィンドウの画像でどうぞ