Repository: microsoft/playwright
File: tests/library/hit-target.spec.ts (TypeScript)

Code before:
  const error = await target.click({ timeout: 3000 }).catch(e => e);
  expect(await page.evaluate('window._clicked')).toBe(undefined);
  expect(error.message).toContain(`<div onclick="window.top._clicked=5">PINK OVERLAY</div> intercepts pointer events`);

  await page.locator('text=overlay').evaluate(e => e.style.display = 'none');

  await target.click();
  expect(await page.evaluate('window._clicked')).toBe(3);
});

it('should click into frame inside closed shadow root', async ({ page, server }) => {
  await page.goto(server.EMPTY_PAGE);
  await page.setContent(`
    <div id=framecontainer>
    </div>
    <script>
      const iframe = document.createElement('iframe');
      iframe.setAttribute('name', 'myframe');
      iframe.setAttribute('srcdoc', '<div onclick="window.top.__clicked = true">click me</div>');
      const div = document.getElementById('framecontainer');
      const host = div.attachShadow({ mode: 'closed' });
      host.appendChild(iframe);
    </script>
  `);

  const frame = await findFrameByName(page, 'myframe');
  await frame.locator('text=click me').click();
  expect(await page.evaluate('window.__clicked')).toBe(true);
});

it('should click an element inside closed shadow root', async ({ page, server }) => {
  await page.goto(server.EMPTY_PAGE);
  await page.setContent(`
    <div id=container>
    </div>
    <script>
      const span = document.createElement('span');
      span.textContent = 'click me';
      span.addEventListener('click', () => window.__clicked = true);
      const div = document.getElementById('container');
      const host = div.attachShadow({ mode: 'closed' });
      host.appendChild(span);
      window.__target = span;
    </script>
  `);

  const handle = await page.evaluateHandle('window.__target');
  await (handle as any as ElementHandle).click();
  expect(await page.evaluate('window.__clicked')).toBe(true);
});


Review comment (suggestion):
```suggestion
  const frame = page.frames()[1];
```

Code after:
  expect(await page.evaluate('window._clicked')).toBe(undefined);
  expect(error.message).toContain(`<div onclick="window.top._clicked=5">PINK OVERLAY</div> intercepts pointer events`);

  await page.locator('text=overlay').evaluate(e => e.style.display = 'none');

  await target.click();
  expect(await page.evaluate('window._clicked')).toBe(3);
});

it('should click into frame inside closed shadow root', async ({ page, server }) => {
  await page.goto(server.EMPTY_PAGE);
  await page.setContent(`
    <div id=framecontainer>
    </div>
    <script>
      const iframe = document.createElement('iframe');
      iframe.setAttribute('name', 'myframe');
      iframe.setAttribute('srcdoc', '<div onclick="window.top.__clicked = true">click me</div>');
      const div = document.getElementById('framecontainer');
      const host = div.attachShadow({ mode: 'closed' });
      host.appendChild(iframe);
    </script>
  `);

  const frame = page.frames()[1];
  await frame.locator('text=click me').click();
  expect(await page.evaluate('window.__clicked')).toBe(true);
});

it('should click an element inside closed shadow root', async ({ page, server }) => {
  await page.goto(server.EMPTY_PAGE);
  await page.setContent(`
    <div id=container>
    </div>
    <script>
      const span = document.createElement('span');
      span.textContent = 'click me';
      span.addEventListener('click', () => window.__clicked = true);
      const div = document.getElementById('container');
      const host = div.attachShadow({ mode: 'closed' });
      host.appendChild(span);
      window.__target = span;
    </script>
  `);

  const handle = await page.evaluateHandle('window.__target');
  await (handle as any as ElementHandle).click();
  expect(await page.evaluate('window.__clicked')).toBe(true);
});

it('should detect overlay from another shadow root', async ({ page, server }) => {