fix(screenshot): prioritize passed type over the extension mime

src/client/elementHandle.ts

@@ -185,8 +185,10 @@ export class ElementHandle<T extends Node = Node> extends JSHandle<T> {
 
   async screenshot(options: channels.ElementHandleScreenshotOptions & { path?: string } = {}): Promise<Buffer> {
     return this._wrapApiCall('elementHandle.screenshot', async () => {
-      const type = determineScreenshotType(options);
-      const result = await this._elementChannel.screenshot({ ...options, type });
+      const copy = { ...options };
+      if (!copy.type)
+        copy.type = determineScreenshotType(options);
+      const result = await this._elementChannel.screenshot(copy);
       const buffer = Buffer.from(result.binary, 'base64');
       if (options.path) {
         await mkdirIfNeeded(options.path);

src/client/page.ts

@@ -457,8 +457,10 @@ export class Page extends ChannelOwner<channels.PageChannel, channels.PageInitia
 
   async screenshot(options: channels.PageScreenshotOptions & { path?: string } = {}): Promise<Buffer> {
     return this._wrapApiCall('page.screenshot', async () => {
-      const type = determineScreenshotType(options);
-      const result = await this._channel.screenshot({ ...options, type });
+      const copy = { ...options };
+      if (!copy.type)
+        copy.type = determineScreenshotType(options);
+      const result = await this._channel.screenshot(copy);
       const buffer = Buffer.from(result.binary, 'base64');
       if (options.path) {
         await mkdirIfNeeded(options.path);

test/elementhandle-screenshot.spec.ts

@@ -393,4 +393,13 @@ describe('element screenshot', (suite, parameters) => {
     await elementHandle.screenshot({path: outputPath});
     expect(await fs.promises.readFile(outputPath)).toMatchSnapshot('screenshot-element-bounding-box.png');
   });
+
+  it('should prefer type over extension', async ({page, server}) => {
+    await page.setViewportSize({width: 500, height: 500});
+    await page.goto(server.PREFIX + '/grid.html');
+    await page.evaluate(() => window.scrollBy(50, 100));
+    const elementHandle = await page.$('.box:nth-of-type(3)');
+    const buffer = await elementHandle.screenshot({ path: 'file.png', type: 'jpeg' });
+    expect([buffer[0], buffer[1], buffer[2]]).toEqual([0xFF, 0xD8, 0xFF]);
+  });
 });

test/page-screenshot.spec.ts

@@ -292,6 +292,11 @@ describe('page screenshot', (suite, { browserName, headful }) => {
     expect(error.message).toContain('path: unsupported mime type "text/plain"');
   });
 
+  it('should prefer type over extension', async ({page}) => {
+    const buffer = await page.screenshot({ path: 'file.png', type: 'jpeg' });
+    expect([buffer[0], buffer[1], buffer[2]]).toEqual([0xFF, 0xD8, 0xFF]);
+  });
+
   it('should work with large size', (test, { browserName }) => {
     test.fail(browserName === 'chromium', 'Upstream Chromium bug');
   }, async ({ page }) => {