Merge pull request #273 from maksym-moshniaha/WAT-5355

ArtMathArt · web-flow · commit 64b13407f7b2 · 2025-11-18T10:42:25.000+02:00
WAT-5355: Add possibility to take screenshots of elements
diff --git a/core/types/src/browser-proxy/index.ts b/core/types/src/browser-proxy/index.ts
@@ -175,7 +175,7 @@ export interface IBrowserProxyPlugin {
 
     makeScreenshot(applicant: string): Promise<string | void>;
 
-    makeElementScreenshot(applicant: string, selector: Selector, scroll?: boolean): Promise<string | void>;
+    makeElementScreenshot(applicant: string, selector: Selector): Promise<string | void>;
 
     uploadFile(applicant: string, filePath: string): Promise<string | void>;
 
diff --git a/packages/e2e-test-app/static-fixtures/screenshot.html b/packages/e2e-test-app/static-fixtures/screenshot.html
@@ -9,9 +9,8 @@
 </head>
 
 <body data-test-automation-id="root" style="padding:0;">
-    <div style="position: relative; width: 100px; height: 100px;padding:0;background-color: red;">
-
+    <div data-test-automation-id="testElement" style="position: relative; width: 100px; height: 100px;padding:0;background-color: red;">
     </div>
 </body>
 
-</html>
+</html>
diff --git a/packages/e2e-test-app/test/selenium/test/element-screenshot.spec.js b/packages/e2e-test-app/test/selenium/test/element-screenshot.spec.js
@@ -0,0 +1,20 @@
+import {run} from 'testring';
+import {assert} from 'chai';
+import {getTargetUrl} from './utils';
+
+run(async (api) => {
+    const app = api.application;
+    await app.url(getTargetUrl(api, 'screenshot.html'));
+
+    const base64String = await app.makeElementScreenshot(app.root.testElement);
+
+    assert.ok(
+        typeof base64String === 'string' && base64String.length > 0,
+        'makeElementScreenshot should return a non-empty string',
+    );
+
+    assert.doesNotThrow(
+        () => Buffer.from(base64String, 'base64'),
+        'returned string should be valid base64 encoded',
+    );
+});
diff --git a/packages/plugin-selenium-driver/src/plugin/index.ts b/packages/plugin-selenium-driver/src/plugin/index.ts
@@ -1247,12 +1247,12 @@ export class SeleniumPlugin implements IBrowserProxyPlugin {
         return client.takeScreenshot();
     }
 
-    public async makeElementScreenshot(applicant: string, selector: Selector, scroll: boolean = true): Promise<string | void> {
+    public async makeElementScreenshot(applicant: string, selector: Selector): Promise<string | void> {
         await this.createClient(applicant);
         const client = this.getBrowserClient(applicant);
         const element = await this.getElement(applicant, selector);
 
-        return client.takeElementScreenshot(await element.elementId, scroll);
+        return client.takeElementScreenshot(await element.elementId);
     }
 
     public async uploadFile(
diff --git a/packages/web-application/src/web-application.ts b/packages/web-application/src/web-application.ts
@@ -199,7 +199,7 @@ export class WebApplication extends PluggableModule {
         if (typeof selector === 'string') {
             return { type: 'xpath', xpath: selector } as XpathSelector;
         }
-        
+
         if (this.isShadowElementPathProxy(selector)) {
             return { type: 'shadow-css', css: selector.toShadowCSSSelector(), parentSelectors: selector.getParentSelectors(), isShadowElement: true } as ShadowCssSelector;
         }
@@ -458,7 +458,7 @@ export class WebApplication extends PluggableModule {
         return result;
     }
 
-    
+
     @stepLog(function (this: WebApplication, xpath: ElementPath, timeout: number = this.WAIT_TIMEOUT) {
         return `Checking if ${this.formatXpath(xpath)} is visible for ${timeout}`;
     })
@@ -1714,6 +1714,16 @@ export class WebApplication extends PluggableModule {
         return null;
     }
 
+    @stepLog(function (this: WebApplication, xpath: ElementPath) {
+        return `Making screenshot of ${this.formatXpath(xpath)}`;
+    })
+    public async makeElementScreenshot(xpath: ElementPath, timeout: number = this.WAIT_TIMEOUT): Promise<string | null> {
+        await this.waitForExist(xpath, timeout);
+
+        const normalizedXPath = this.normalizeSelector(xpath);
+        return await this.client.makeElementScreenshot(normalizedXPath);
+    }
+
     @stepLog(function (this: WebApplication, fullPath: string) {
         return `Uploading file ${fullPath}`;
     })
diff --git a/packages/web-application/src/web-client.ts b/packages/web-application/src/web-client.ts
@@ -307,8 +307,8 @@ export class WebClient implements IWebApplicationClient {
         return this.makeRequest(BrowserProxyActions.makeScreenshot, []);
     }
 
-    public makeElementScreenshot(selector: Selector, scroll?: boolean) {
-        return this.makeRequest(BrowserProxyActions.makeElementScreenshot, [selector, scroll]);
+    public makeElementScreenshot(selector: Selector) {
+        return this.makeRequest(BrowserProxyActions.makeElementScreenshot, [selector]);
     }
 
     public uploadFile(path: string) {

Original file line number	Diff line number	Diff line change
`@@ -1247,12 +1247,12 @@ export class SeleniumPlugin implements IBrowserProxyPlugin {`
`1247`	`1247`	`return client.takeScreenshot();`
`1248`	`1248`	`}`
`1249`	`1249`
`1250`		`- public async makeElementScreenshot(applicant: string, selector: Selector, scroll: boolean = true): Promise<string \| void> {`
	`1250`	`+ public async makeElementScreenshot(applicant: string, selector: Selector): Promise<string \| void> {`
`1251`	`1251`	`await this.createClient(applicant);`
`1252`	`1252`	`const client = this.getBrowserClient(applicant);`
`1253`	`1253`	`const element = await this.getElement(applicant, selector);`
`1254`	`1254`
`1255`		`- return client.takeElementScreenshot(await element.elementId, scroll);`
	`1255`	`+ return client.takeElementScreenshot(await element.elementId);`
`1256`	`1256`	`}`
`1257`	`1257`
`1258`	`1258`	`public async uploadFile(`
Original file line number	Diff line number	Diff line change
`@@ -307,8 +307,8 @@ export class WebClient implements IWebApplicationClient {`
`307`	`307`	`return this.makeRequest(BrowserProxyActions.makeScreenshot, []);`
`308`	`308`	`}`
`309`	`309`
`310`		`- public makeElementScreenshot(selector: Selector, scroll?: boolean) {`
`311`		`- return this.makeRequest(BrowserProxyActions.makeElementScreenshot, [selector, scroll]);`
	`310`	`+ public makeElementScreenshot(selector: Selector) {`
	`311`	`+ return this.makeRequest(BrowserProxyActions.makeElementScreenshot, [selector]);`
`312`	`312`	`}`
`313`	`313`
`314`	`314`	`public uploadFile(path: string) {`