[JS][bidi] Add captureScreenshot command (#12510)

Co-authored-by: Sri Harsha <12621691+harsha509@users.noreply.github.com>
Co-authored-by: Puja Jagani <puja.jagani93@gmail.com>

javascript/node/selenium-webdriver/bidi/browsingContext.js

@@ -15,6 +15,7 @@
 // specific language governing permissions and limitations
 // under the License.
 
+const { InvalidArgumentError, NoSuchFrameError } = require('../lib/error')
 const { BrowsingContextInfo } = require('./browsingContextTypes')
 class BrowsingContext {
   constructor(driver) {
@@ -165,6 +166,78 @@ class BrowsingContext {
     const response = await this.bidi.send(params)
     return new PrintResult(response.result.data)
   }
+
+  async captureScreenshot() {
+    let params = {
+      method: 'browsingContext.captureScreenshot',
+      params: {
+        context: this._id,
+      },
+    }
+
+    const response = await this.bidi.send(params)
+    this.checkErrorInScreenshot(response)
+    return response['result']['data']
+  }
+
+  async captureBoxScreenshot(x, y, width, height) {
+    let params = {
+      method: 'browsingContext.captureScreenshot',
+      params: {
+        context: this._id,
+        clip: {
+          type: 'viewport',
+          x: x,
+          y: y,
+          width: width,
+          height: height,
+        },
+      },
+    }
+
+    const response = await this.bidi.send(params)
+    this.checkErrorInScreenshot(response)
+    return response['result']['data']
+  }
+
+  async captureElementScreenshot(
+    sharedId,
+    handle = undefined,
+    scrollIntoView = undefined
+  ) {
+    let params = {
+      method: 'browsingContext.captureScreenshot',
+      params: {
+        context: this._id,
+        clip: {
+          type: 'element',
+          element: {
+            sharedId: sharedId,
+            handle: handle,
+          },
+          scrollIntoView: scrollIntoView,
+        },
+      },
+    }
+
+    const response = await this.bidi.send(params)
+    this.checkErrorInScreenshot(response)
+    return response['result']['data']
+  }
+
+  checkErrorInScreenshot(response) {
+    if ('error' in response) {
+      const { error, msg } = response
+
+      switch (error) {
+        case 'invalid argument':
+          throw new InvalidArgumentError(msg)
+
+        case 'no such frame':
+          throw new NoSuchFrameError(msg)
+      }
+    }
+  }
 }
 
 class NavigateResult {

javascript/node/selenium-webdriver/test/bidi/bidi_test.js

@@ -20,7 +20,7 @@
 // Imports for LogInspector and BrowsingContext
 const assert = require('assert')
 const firefox = require('../../firefox')
-const { Browser } = require('../../')
+const { Browser, By, WebElement } = require('../../')
 const { Pages, suite } = require('../../lib/test')
 const logInspector = require('../../bidi/logInspector')
 const BrowsingContext = require('../../bidi/browsingContext')
@@ -301,6 +301,7 @@ suite(
       let startIndex = 0
       let endIndex = 5
       let pdfMagicNumber = 'JVBER'
+      let pngMagicNumber = 'iVBOR'
 
       it('can create a browsing context for given id', async function () {
         const id = await driver.getWindowHandle()
@@ -441,6 +442,70 @@ suite(
         let base64Code = result.data.slice(startIndex, endIndex)
         assert.strictEqual(base64Code, pdfMagicNumber)
       })
+
+      it('can take screenshot', async function () {
+        const id = await driver.getWindowHandle()
+        const browsingContext = await BrowsingContext(driver, {
+          browsingContextId: id,
+        })
+
+        const response = await browsingContext.captureScreenshot()
+        const base64code = response.slice(startIndex, endIndex)
+        assert.equal(base64code, pngMagicNumber)
+      })
+
+      it('can take box screenshot', async function () {
+        const id = await driver.getWindowHandle()
+        const browsingContext = await BrowsingContext(driver, {
+          browsingContextId: id,
+        })
+
+        const response = await browsingContext.captureBoxScreenshot(
+          5,
+          5,
+          10,
+          10
+        )
+
+        const base64code = response.slice(startIndex, endIndex)
+        assert.equal(base64code, pngMagicNumber)
+      })
+
+      it('can take element screenshot', async function () {
+        const id = await driver.getWindowHandle()
+        const browsingContext = await BrowsingContext(driver, {
+          browsingContextId: id,
+        })
+
+        await driver.get(Pages.formPage)
+        const element = await driver.findElement(By.id('checky'))
+        const elementId = await element.getId()
+        const response = await browsingContext.captureElementScreenshot(
+          elementId
+        )
+
+        const base64code = response.slice(startIndex, endIndex)
+        assert.equal(base64code, pngMagicNumber)
+      })
+
+      it('can scroll and take element screenshot', async function () {
+        const id = await driver.getWindowHandle()
+        const browsingContext = await BrowsingContext(driver, {
+          browsingContextId: id,
+        })
+
+        await driver.get(Pages.formPage)
+        const element = await driver.findElement(By.id('checkbox-with-label'))
+        const elementId = await element.getId()
+        const response = await browsingContext.captureElementScreenshot(
+          elementId,
+          undefined,
+          true
+        )
+
+        const base64code = response.slice(startIndex, endIndex)
+        assert.equal(base64code, pngMagicNumber)
+      })
     })
 
     describe('Browsing Context Inspector', function () {