display styles to compare CI vs local

src/browser/browser.ts

@@ -174,6 +174,21 @@ export class Browser {
     page.on('dialog', acceptBeforeUnload);
   }
 
+  async getStyles(page: puppeteer.Page) {
+    const pageTitleSelector = "[class$='panel-title']";
+    await page.waitForSelector(pageTitleSelector);
+    const styles = await page.$eval("[class$='panel-title']", (el) => {
+      const stylesObject = getComputedStyle(el);
+      const styles = {};
+      for (const prop in stylesObject) {
+        styles[prop] = stylesObject[prop];
+      }
+      return stylesObject;
+    });
+
+    this.log.info('getstyles', 'styles', styles);
+  }
+
   async scrollToLoadAllPanels(page: puppeteer.Page, options: ImageRenderOptions): Promise<DashboardScrollingResult> {
     const scrollDivSelector = '[class="scrollbar-view"]';
     const scrollDelay = options.scrollDelay ?? 500;
@@ -360,6 +375,8 @@ export class Browser {
           options.fullPageImage || false
         );
       }, 'panelsRendered');
+
+      await this.getStyles(page);
     } catch (err) {
       this.log.error('Error while waiting for the panels to load', 'url', options.url, 'err', err.stack);
     }

src/service/http-server.integration.test.ts

@@ -113,7 +113,7 @@ describe('Test /render', () => {
   it('should respond with the graph panel screenshot', async () => {
     const url = `${getGrafanaEndpoint(domain)}/${dashboardUid}?panelId=${panelIds.graph}&render=1&from=1699333200000&to=1699344000000`;
     const response = await request(server.app)
-      .get(`/render?url=${encodeURIComponent(url)}&timeout=5&renderKey=${renderKey}&domain=${domain}&width=500&height=300&deviceScaleFactor=2`)
+      .get(`/render?url=${encodeURIComponent(url)}&timeout=5&renderKey=${renderKey}&domain=${domain}&width=500&height=300&deviceScaleFactor=1`)
       .set('X-Auth-Token', '-');
 
     const goldenFilePath = path.join(goldenFilesFolder, 'graph.png');
@@ -123,7 +123,7 @@ describe('Test /render', () => {
 
     expect(response.statusCode).toEqual(200);
     expect(response.headers['content-type']).toEqual('image/png');
-    console.log(response.body.toString('hex'));
+    // console.log(response.body.toString('hex'));
     expect(response.body).toEqual(fs.readFileSync(goldenFilePath));
   });