Merge pull request #31 from renoki-co/feature/wait-for-selector

[feature] Wait for selector

.github/workflows/ci.yml

@@ -19,13 +19,12 @@ jobs:
     strategy:
       matrix:
         php:
-          - '7.3'
           - '7.4'
           - '8.0'
         node:
-          - '10'
           - '12'
           - '14'
+          - '16'
         laravel:
           - 7.*
           - 8.*

server.js

@@ -177,6 +177,10 @@ app.use('/healthcheck', require('express-healthcheck')());
       if (action.name === 'wait') {
         await page.waitForTimeout(action.seconds * 1000);
       }
+
+      if (action.name === 'wait-for-selector') {
+        await page.waitForSelector(action.selector, { timeout: action.seconds * 1000 });
+      }
     }, Promise.resolve());
 
 

src/Actions/Action.php

@@ -13,6 +13,7 @@ abstract class Action
      */
     public static function new(): Actionable
     {
+        /** @var Actionable $this */
         return new static(...func_get_args());
     }
 }

src/Actions/Click.php

@@ -43,7 +43,7 @@ public function __construct(string $selector, int $amount = 1, string $button =
     }
 
     /**
-     * Format to an array that can instructm and be read
+     * Format to an array that can instruct and be read
      * by the JS script to perform a specific action.
      *
      * @return array

src/Actions/Keyboard.php

@@ -74,7 +74,7 @@ public function on(string $selector)
     }
 
     /**
-     * Format to an array that can instructm and be read
+     * Format to an array that can instruct and be read
      * by the JS script to perform a specific action.
      *
      * @return array

src/Actions/Wait.php

@@ -25,7 +25,7 @@ public function __construct(int $seconds)
     }
 
     /**
-     * Format to an array that can instructm and be read
+     * Format to an array that can instruct and be read
      * by the JS script to perform a specific action.
      *
      * @return array

src/Actions/WaitForSelector.php

@@ -0,0 +1,42 @@
+<?php
+
+namespace RenokiCo\Clusteer\Actions;
+
+class WaitForSelector extends Wait
+{
+    /**
+     * The selector to wait for.
+     *
+     * @var string
+     */
+    protected $selector;
+
+    /**
+     * Initialize the action.
+     *
+     * @param  string  $selector
+     * @param  int  $seconds
+     * @return void
+     */
+    public function __construct(string $selector, int $seconds)
+    {
+        parent::__construct($seconds);
+
+        $this->selector = $selector;
+    }
+
+    /**
+     * Format to an array that can instruct and be read
+     * by the JS script to perform a specific action.
+     *
+     * @return array
+     */
+    public function format(): array
+    {
+        return [
+            'name' => 'wait-for-selector',
+            'selector' => $this->selector,
+            'seconds' => $this->seconds,
+        ];
+    }
+}

src/Concerns/HasTimeActions.php

@@ -3,6 +3,7 @@
 namespace RenokiCo\Clusteer\Concerns;
 
 use RenokiCo\Clusteer\Actions\Wait;
+use RenokiCo\Clusteer\Actions\WaitForSelector;
 
 trait HasTimeActions
 {
@@ -16,4 +17,16 @@ public function wait(int $seconds)
     {
         return $this->action(Wait::new($seconds));
     }
+
+    /**
+     * Wait for a certain amount of seconds.
+     *
+     * @param  string  $selector
+     * @param  int  $seconds
+     * @return $this
+     */
+    public function waitForSelector(string $selector, int $seconds)
+    {
+        return $this->action(WaitForSelector::new($selector, $seconds));
+    }
 }

src/Contracts/Actionable.php

@@ -5,7 +5,7 @@
 interface Actionable
 {
     /**
-     * Format to an array that can instructm and be read
+     * Format to an array that can instruct and be read
      * by the JS script to perform a specific action.
      *
      * @return array

tests/CrawlingTest.php

@@ -135,4 +135,17 @@ public function test_screenshot()
 
         file_put_contents('artifacts/test_screenshot.jpeg', $content);
     }
+
+    public function test_wait_for_selector()
+    {
+        $clusteer = Clusteer::to('http://localhost:8000')
+            ->leftClick('#button-trigger-selector')
+            ->waitForSelector('#selector', 10)
+            ->withHtml()
+            ->get();
+
+        $this->assertTrue(
+            Str::contains($clusteer->getHtml(), 'Selector shown :)')
+        );
+    }
 }

tests/fixtures/tester.html

@@ -20,6 +20,12 @@
     >
       Click me with random mouse buttons
     </button>
+    <button
+      id="button-trigger-selector"
+      @click.prevent="createWaitForTimeoutTrigger"
+    >
+      Click me to start a 5s timeout for the selector <kbd>id="selector"</kbd> to show
+    </button>
   </div>
 
   <div>
@@ -44,6 +50,9 @@
   <div>
     Cookies enabled: {{ cookiesEnabled() ? 'Yes' : 'No' }}
   </div>
+  <div v-if="showSelector" id="selector">
+    Selector shown :)
+  </div>
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
@@ -56,6 +65,7 @@
       leftClicked: false,
       middleClicked: false,
       typedText: '',
+      showSelector: false,
     },
     created() {
       window.addEventListener('keydown', (e) => {
@@ -79,6 +89,11 @@
 
         return cookieEnabled;
       },
+      createWaitForTimeoutTrigger() {
+        setTimeout(() => {
+          this.showSelector = true;
+        }, 5000);
+      }
     },
   });
 </script>