fix: check for visibility of the last selected element only

src/PuppeteerRunnerExtension.ts

@@ -557,7 +557,11 @@ async function waitForSelector(
   if (!selector.length) {
     throw new Error('Empty selector provided to `waitForSelector`');
   }
-  let handle = await frame.waitForSelector(selector[0]!, options);
+  let isLastPart = selector.length === 1;
+  let handle = await frame.waitForSelector(selector[0]!, {
+    ...options,
+    visible: isLastPart && options.visible
+  });
   for (const part of selector.slice(1, selector.length)) {
     if (!handle) {
       throw new Error('Could not find element: ' + selector.join('>>'));
@@ -566,7 +570,11 @@ async function waitForSelector(
       el.shadowRoot ? el.shadowRoot : el
     );
     handle.dispose();
-    handle = await innerHandle.waitForSelector(part, options);
+    isLastPart = selector[selector.length - 1] === part;
+    handle = await innerHandle.waitForSelector(part, {
+      ...options,
+      visible: isLastPart && options.visible
+    });
     innerHandle.dispose();
   }
   if (!handle) {

test/resources/invisible-parent.html

@@ -0,0 +1,20 @@
+<style>
+  .parent {
+    width: 0;
+    height: 0;
+    top: 0;
+    left: 0;
+    position: absolute;
+  }
+  .child {
+    position: absolute;
+    width: 50px;
+    height: 50px;
+  }
+</style>
+
+<div class="parent">
+  <button class="child">
+    test
+  </button>
+</div>

test/runner.test.ts

@@ -204,6 +204,28 @@ describe('Runner', () => {
     await runner.run();
   });
 
+  it('should be able to click elements inside invisible parents', async () => {
+    const runner = await createRunner(
+      {
+        title: 'test',
+        steps: [
+          {
+            type: 'navigate',
+            url: `${HTTP_PREFIX}/invisible-parent.html`,
+          },
+          {
+            type: 'click',
+            selectors: [['.parent', '.child']],
+            offsetX: 1,
+            offsetY: 1,
+          },
+        ],
+      },
+      new PuppeteerRunnerExtension(browser, page)
+    );
+    await runner.run();
+  });
+
   it('should be able to replay click steps on checkboxes', async () => {
     const runner = await createRunner(
       {