Repository: microsoft/playwright
File: tests/library/inspector/cli-codegen-3.spec.ts (TypeScript)

Code before:
      >
        <div class="cdk-overlay-backdrop" id="backdrop"></div>
        <div class="dialog-content">
          <button id="closeBtn">Close Dialog</button>
        </div>
      </div>
      <button id="openBtn">Open Dialog</button>
      <script>
        document.getElementById('openBtn').onclick = () => {
          document.getElementById('mypopover').showPopover();
        };
        document.getElementById('backdrop').onclick = () => {
          document.getElementById('mypopover').hidePopover();
        };
        document.getElementById('closeBtn').onclick = () => {
          document.getElementById('mypopover').hidePopover();
        };
      </script>
    `);

    await page.getByRole('button', { name: 'Open Dialog' }).click();
    await expect(page.getByRole('button', { name: 'Close Dialog' })).toBeVisible();

    // 10,10 points to the backdrop. when we replay the click on it backdrop,
    // playwright doesn't target 10,10, but instead it targets the center of the element at 10,10
    // this happens to be the 'close dialog' button! what should we do?

    await page.mouse.click(10, 10);
    await expect(page.getByRole('button', { name: 'Close Dialog' })).toBeHidden();
  });
});

async function createFrameHierarchy(page: Page, recorder: Recorder, server: TestServer) {
  /*
    iframe
      div Hello1
      iframe
        div Hello2
        iframe[name=one]
          div HelloNameOne
        iframe
          dev HelloAnonymous
  */
  await recorder.setContentAndWait(`
    <iframe id=frame1 srcdoc="<div>Hello1</div><iframe srcdoc='<div>Hello2</div><iframe name=one></iframe><iframe name=two></iframe><iframe></iframe>'>">
  `, server.EMPTY_PAGE, 6);
  const frameHello1 = page.mainFrame().childFrames()[0];
  const frameHello2 = frameHello1.childFrames()[0];
  const frameTwo = page.frame({ name: 'two' })!;
  await frameTwo.setContent(`<div>HelloNameTwo</div>`);
  const frameAnonymous = frameHello2.childFrames().find(f => !f.name())!;

Review comment (bug):
I think it's ok that playwright clicks in the center and hits the `close dialog` button. I don't think we should do anything about this. Let's update the test so that's not an issue (e.g. move the button) and not mark it as `.fail`.

Code after:
        id="mypopover"
      >
        <div class="cdk-overlay-backdrop" id="backdrop"></div>
        <div class="dialog-content">
          <button id="closeBtn">Close Dialog</button>
        </div>
      </div>
      <button id="openBtn">Open Dialog</button>
      <script>
        document.getElementById('openBtn').onclick = () => {
          document.getElementById('mypopover').showPopover();
        };
        document.getElementById('backdrop').onclick = () => {
          document.getElementById('mypopover').hidePopover();
        };
        document.getElementById('closeBtn').onclick = () => {
          document.getElementById('mypopover').hidePopover();
        };
      </script>
    `);

    await page.getByRole('button', { name: 'Open Dialog' }).click();
    await expect(page.getByRole('button', { name: 'Close Dialog' })).toBeVisible();

    await page.mouse.click(10, 10);
    await expect(page.getByRole('button', { name: 'Close Dialog' })).toBeHidden();
  });

  test('should record when fullscreen element is open', { annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/39095' } }, async ({ openRecorder }) => {
    const { page, recorder } = await openRecorder();

    await recorder.setContentAndWait(`
      <div id="fullscreen-container">
        <button id="closeBtn">Close Fullscreen</button>
      </div>
      <button id="openBtn">Go Fullscreen</button>
      <script>
        document.getElementById('openBtn').onclick = () => {
          document.getElementById('fullscreen-container').requestFullscreen();
        };
        document.getElementById('closeBtn').onclick = () => {
          document.exitFullscreen();
        };
      </script>
    `);

    await page.getByRole('button', { name: 'Go Fullscreen' }).click();
    await expect(page.getByRole('button', { name: 'Close Fullscreen' })).toBeVisible();

    await page.getByTitle('Assert text').click();
  });