Exploratory testing on 3.16

[MathieuLamiot]

From QA Team and Product: https://wp-media.slack.com/archives/CUKB44GNN/p1714029856799009
The whole team should participate in those testing activities, while help can be provided from @wp-media/qa-team

PREREQUISITE:

• Merge LCP/ATF Feature branch & Get Rid of Cache tab into the 3.16 branch.

EXPLORATORY TESTING:

• Visual non-regression and no errors triggered when browsing templates (from E2E repo) with the associated page builder/theme activated. Some templates have a page builder/ theme name in them: those are the templates to manually check with the related theme/page builder. You should check that the beacon captures LCP/ATF and that a new visit performs the front-end optimization without throwing errors/warnings.

• Non-regerssion with WPML: Test plan on Rocket-E2E for WPML + No console error/no visual reg. -> Open a page with LCP/ATF, no errors and also switch language to check no errors. Check images with relative paths: WPML changes the home_url so we must make sure the captured LCP/ATF and injected one have the correct URLs.
  We should check alll WPML setups (query based, directory based, domain based). Domain based only works on rocketlabs.

• How it works with video + preview image?: “To investgiate to understand, not necessarily to fix” Insert a video in a page/post and enable the preview image option on WP Rocket. Check how the LCP would work on this ; also check in case this is the ATF -> Ideal scenario is that the optimized element on the front-end would be the preview image.

• Element 0 opacity, Element with low entropy?. “To investgiate to understand, not necessarily to fix”: What happens with those elements on PSI? What about our beacon script?

• How it works with sliders and image image carousels? “To investgiate to understand, not necessarily to fix”: same here. Sliders -> Install slider plugin and no visual reg./no errors.

• Pages in a background tab? What if we open the page with Ctrl+Click and don’t visualize the page? What happens to the beacon script?

•  How it works with CDN? Activate CDN and check what the beacon captures (absolute and relative). Then, open the optimized page and make sure that the optimized links are the one actually loaded by the browser (we must avoid doubling requests, and also make sure we fetch priority high the right images).

• Import new settings in old version/old settings in new version while rucss on/off. Export/Import from 3.15->3.16: no errors/no warnings ; if possible, all settings should be preserved.

• If lcp is next-gen while imagify is used and serving/not serving images. make sure we identify and optimize the right image that is actually served.

[MathieuLamiot]

CDN exploratory test results reported here

[Miraeld]

How it works with video + preview image?: “To investgiate to understand, not necessarily to fix” Insert a video in a page/post and enable the preview image option on WP Rocket. Check how the LCP would work on this ; also check in case this is the ATF -> Ideal scenario is that the optimized element on the front-end would be the preview image

If this is a LCP, I get this result in the DB: {"type":"img","src":"https:\/\/i.ytimg.com\/vi\/HPFyrgMl9uE\/hqdefault.jpg"}. when reloading the page, It doesn't seem to do anything more. The preview image gets lazyloaded.

If it is a ATF, it still gets lazyloaded. Doesn't seems to do anything more on the image from the video.

[Miraeld]

Pages in a background tab? What if we open the page with Ctrl+Click and don’t visualize the page? What happens to the beacon script?

The beacon script seems to work properly as I get coherent result saved in the DB.

[jeawhanlee]

Import new settings in old version/old settings in new version while rucss on/off. Export/Import from 3.15->3.16: no errors/no warnings ; if possible, all settings should be preserved.

Exported settings from 3.15.10 with RUCSS enabled/disabled are imported correctly with no error/warning and all settings are preserved.

[jeawhanlee]

If lcp is next-gen while imagify is used and serving/not serving images. make sure we identify and optimize the right image that is actually served.

LCP candidate is correctly identified and optimized with Display images in Next-Gen format on the site enabled/disabled.

[hanna-meda]

How it works with sliders and image image carousels? “To investgiate to understand, not necessarily to fix”: same here. Sliders -> Install slider plugin and no visual reg./no errors.

Used Slick Slider Plugin.
PSI identifies either the page title or the layer of text within the slider component as LCP. In our DB,above_the_fold table, will be one of the images inside the slider/carousel identified as lcp. O/w no errors.

[hanna-meda]

Element 0 opacity, Element with low entropy?. “To investgiate to understand, not necessarily to fix”: What happens with those elements on PSI? What about our beacon script?

• image with 0 opacity: PSI identifies h1 as LCP, in DB will be the zero opacity image identified as lcp
• low resolution / icon or blurry image: same results on PSI & DB
• heavily optimized images: same results on PSI & DB