How to operate on multiple levels of shadow DOM elements

puppeteer-shadow-query.ts

import puppeteer from 'puppeteer';

function queryShadow(...args: any[]): string {
  const prop = args.pop();
  const middle = args.map(a => `.querySelector('${a}')`).join('.shadowRoot');
  return `document${middle}.${prop}`;
}

describe('my-component', () => {
  it('renders', async () => {
    const browser = await puppeteer.launch({ headless: true });
    const page = await browser.newPage();
    await page.goto('http://localhost:3333', {waitUntil: 'networkidle2'});
    // const inputValue = await page.evaluate(() => {
      // const input: HTMLInputElement = document.querySelector('body > my-component').shadowRoot.querySelector('div > div > other-comp').shadowRoot.querySelector('div > input[type="text"]');
      // return input.value;
    // });
    const inputValue = await page.evaluate(queryShadow('my-component', 'other-comp', 'input', 'value'));
    // const inputValue = await page.evaluate(queryShadow('my-component', 'other-comp', 'input', 'value=\'BaaaaaBB\''));
    // await page.screenshot({ path: 'yas.png' });
    expect(inputValue).toEqual('AAA');
    await browser.close();
  });
});