Issue While Lighthouse testing of an Embedded App

[ashutoshsingh]

Requirement: To have performance Test of embedded App using Lighthouse

Issue: For both Mobile and Desktop options in Lighthouse, I get different errors related to Chrome version although I am on latest version.

Steps to Reproduce :
- Go to store admin url `https://cb-ashutosh-test.myshopify.com/admin`
- open app(optional),
- open developer console and go to lighthouse tab
- Click on generate report or analyze page load option (mobile/desktop)
- Analysis will start and you can see error pages.
- Although scores are generated but they doesnt seem to be right due to error in attached images.

Error in Desktop ModeError in Mobile Mode

[oscprofessional]

@ashutoshsingh ,

I think you are testing the dev site right ?

[ashutoshsingh]

@oscprofessional 
Yes, its still in development

[oscprofessional]

@ashutoshsingh ,

Give me the store access.

[oscprofessional]

@ashutoshsingh ,

It is saying that update your internet browser.

You have to live the store then check...

[ashutoshsingh]

@oscprofessional ,
So basically, this test runs for app only on live stores ?

[Cedcommerce]

Hello @ashutoshsingh, 

We have checked your Issue, and it seems that you are not using the latest version of Chrome, your current chrome version is 98.0 and the latest version is 103.0 hence, please update the chrome to avoid this issue.

Refer to the image below.

image.png

Let us know if you need any further help.

Regards, 

Team CedCommerce

[ashutoshsingh]

Hi,

Thanks for responding. I already checked that as the first thing. I am
using latest version of chrome.

And it's very strange that while testing the app, it is showing some older
version.

Thanks

[mapp123]

I have the same issue as well. What is the deal here? We want to publish the app for review and this is basically the last thing on our todo list. Have been looking at this confused and totally "wrong" error message for two days now with no resolution. How do we fix this?

[ashutoshsingh]

Hi @mapp123 ,

Although I didn't get a proper solution, I got a sort of workaround, try to run Analyse by giving a max window to page. When the test starts, you can see an option to `Continue with unsupported Browser` then click it whenever it comes. Testing will resume after you click that option.

Mobile testing




Thanks
Ashutosh

[mapp123]

Thank you for the suggestion. Already tried it, but it corrupts the test and reduces the score of the app. We are in the 80% mark, except seo is around 75%.

[JoseSamper]

Hello,

I am sorry you are experience this problem. Was this a requeriment from Shopify to approve your app?

According to the official documentation, performance testing is only required for the storefront, not the Shopify Admin, see https://shopify.dev/apps/best-practices/performance#testing-for-performance

[htanipog]

My chrome is up to date. Facing the same issue, where you able to find a solution for this other than clicking on `continue with unsupported version`? 

[lgemc]

Same here.... i am using 111 chrome version

[lgemc]

Is a common error running lighthouse inside a chrome dev tools, the good news is that there are more options to run it 🌞

npm install -g lighthouse 

Run chrome from lighouse, and login into Shopify app.

npx chrome-debug

After that in console you get a port number, something like this

✨Chrome debugging port: 65405 # This port will be used in the last step

Go to your shop and login in the lighthouse recently opened browser

Next run lighthouse to see results

npx lighthouse https://admin.shopify.com/store/<your-shop-name>/apps/<your-app-name>  --disable-storage-reset --port <your-port, in prev steps it was be generated> --view

It will take some time, after that will open in your browser all lighthose report