Lighthouse Reports Showing Mobile Layout Despite Desktop Configuration File

[iamAfrontendDev]

Lighthouse by defaults to the mobile layout. I am passing the lighthouseDesktopConfig file, located at lighthouse/core/config/lr-desktop-config from the node_modules to configure the tests for the desktop layout. However, the reports are still reflecting the mobile layout. Even with the desktop configuration being passed.



on file specified, the issue persists.

[qakos]

and I have the same situation

[qakos]

is any solution to solve this problem?

[vito-techietalent]

@qakos I've used the following opts in a similar scenario and seems to work:

await playAudit({
  opts: {
    formFactor: "desktop",
    screenEmulation: { disabled: true },
  },

[qakos]

@vito-techietalent thank you for your solution. For now in report showing tablet version of page, but still not desktop. Which version of playwright-lighthouse do you use?

[qakos]

I added 'opts' settings in my code. As I understand, for lighthouse my page opened in a viewport width less than 1024px, despite the fact that in the playwright settings of the project, the viewport 1920x1080 is specified. But in playwright ui-mode page opened with viewport as I need.

[vito-techietalent]

@qakos
I'm using latest: 4.0.0

Regarding screen size, on the chrome.launch({ .... line you may have to add the args to define the screen size, since it's probably being taken from there instead of the config.
Now, I imagine, it's going to the default, so try adding:

await playwright.chromium.launch({
  args: ["--remote-debugging-port=9222", "--window-size=1920,1080"],
});

Source https://stackoverflow.com/questions/77278023/how-to-maximize-the-window-size-in-playwright

[qakos]

@vito-techietalent Thank you! This solution helped me to solve my problem!