Add waitForSelector()

spatie · Oct 9, 2023 · 1b74e71 · 1b74e71
1 parent 5a1981b
commit 1b74e71
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 0 deletions.
diff --git a/bin/browser.cjs b/bin/browser.cjs
@@ -369,6 +369,10 @@ const callChrome = async pup => {
             await page.waitForFunction(request.options.function, functionOptions);
         }
 
+        if (request.options.waitForSelector) {
+            await page.waitForSelector(request.options.waitForSelector, request.options.waitForSelectorOptions ?? undefined);
+        }
+
         output = await getOutput(page, request);
 
         if (!request.options.path) {

diff --git a/docs/usage/creating-images.md b/docs/usage/creating-images.md
@@ -230,6 +230,17 @@ Browsershot::url('https://example.com')
     ->waitForFunction('window.innerWidth < 100', $pollingInMilliseconds, $timeoutInMilliseconds)
     ->save($pathToImage);
 ```
+
+## Waiting for a selector
+
+You can also wait for a selector by using `waitForSelector()`. This is useful if you need to wait for the selector to appear in page.
+
+```php
+Browsershot::url('https://example.com')
+    ->waitForSelector('#my_selector')
+    ->save($pathToImage);
+```
+
 ## Adding JS
 
 You can add javascript prior to your screenshot or output using the syntax for [Puppeteer's addScriptTag](https://github.com/puppeteer/puppeteer/blob/v1.9.0/docs/api.md#pageaddscripttagoptions).

diff --git a/src/Browsershot.php b/src/Browsershot.php
@@ -231,6 +231,17 @@ public function waitForFunction(string $function, $polling = self::POLLING_REQUE
         return $this->setOption('function', $function);
     }
 
+    public function waitForSelector(string $selector, array $options = [])
+    {
+        $this->setOption('waitForSelector', $selector);
+
+        if (! empty($options)) {
+            $this->setOption('waitForSelectorOptions', $options);
+        }
+
+        return $this;
+    }
+
     public function setUrl(string $url)
     {
         if (Helpers::stringStartsWith(strtolower($url), 'file://')) {

diff --git a/tests/BrowsershotTest.php b/tests/BrowsershotTest.php
@@ -1127,6 +1127,49 @@
     ], $command);
 });
 
+it('can add a wait for selector', function () {
+    $command = Browsershot::url('https://example.com')
+        ->waitForSelector('.wait_for_me')
+        ->createScreenshotCommand('screenshot.png');
+
+    $this->assertEquals([
+        'url' => 'https://example.com',
+        'action' => 'screenshot',
+        'options' => [
+            'waitForSelector' => '.wait_for_me',
+            'path' => 'screenshot.png',
+            'viewport' => [
+                'width' => 800,
+                'height' => 600,
+            ],
+            'args' => [],
+            'type' => 'png',
+        ],
+    ], $command);
+});
+
+it('can add a wait for selector and provide options', function () {
+    $command = Browsershot::url('https://example.com')
+        ->waitForSelector('.wait_for_me', ['visibile' => true])
+        ->createScreenshotCommand('screenshot.png');
+
+    $this->assertEquals([
+        'url' => 'https://example.com',
+        'action' => 'screenshot',
+        'options' => [
+            'waitForSelector' => '.wait_for_me',
+            'waitForSelectorOptions' => ['visibile' => true],
+            'path' => 'screenshot.png',
+            'viewport' => [
+                'width' => 800,
+                'height' => 600,
+            ],
+            'args' => [],
+            'type' => 'png',
+        ],
+    ], $command);
+});
+
 it('can input form fields and post and get the body html', function () {
     $delay = 2000;