tmp

package.json

@@ -12,6 +12,7 @@
     "lint:fix": "eslint  . --ext .ts --fix",
     "test:e2e": "$npm_package_config_testCommand",
     "test:smoke": "$npm_package_config_testCommand --tags @smoke",
+    "test:lcpll": "$npm_package_config_testCommand --tags @lcpll",
     "test:local": "$npm_package_config_testCommand --tags @local",
     "test:online": "$npm_package_config_testCommand --tags @online",
     "test:vr": "$npm_package_config_testCommand --tags @vr",

src/features/ll-lcp.feature

@@ -0,0 +1,24 @@
+@lcpll
+Feature: Lazyload with LCP
+
+  Background:
+    Given I am logged in
+    And plugin is installed 'new_release'
+    And plugin is activated
+    When I go to 'wp-admin/options-general.php?page=wprocket#dashboard'
+    And I save settings 'media' 'lazyloadCssBgImg'
+
+  Scenario: Should Exclude LCP/ATF from Lazyload
+    Given I visit page '[TEMPLATE]' with browser dimension 1600 x 700
+    When I clear cache
+    Then lcp image markup is not written to LL format
+    And ATF image markup is not written to LL format
+
+  Scenario: Should exclude next-gen lcp/atf from LL
+    Given plugin is installed 'imagify'
+    And display next-gen is enabled on imagify # Create this step
+    And page with images having next-gen avif, webp, avif/webp, no next gen is visited # I didn't get that
+    When I clear cache
+    And I visit the page '[TEMPLATE]'  with dimension 1600 x 700
+    Then lcp image markup is not written to LL format
+    And ATF image markup is not written to LL format

src/support/steps/lcp-beacon-script.ts

@@ -149,22 +149,37 @@ Then('lcp and atf should be as expected for {string}', async function (this: ICu
     expect(truthy).toBeTruthy();
 });
 
+let lcpImages: Array<{ src: string; fetchpriority: string | boolean; lazyloaded: string | boolean }> = [];
+
 Then('lcp image should have fetchpriority', async function (this: ICustomWorld) {
     truthy= false;
 
-    const imageWithFetchPriority = await this.page.evaluate(() => {
+    lcpImages = await this.page.evaluate(() => {
         const images = document.querySelectorAll('img');
         return Array.from(images).map(img => ({
             src: img.getAttribute('src'),
-            fetchpriority: img.getAttribute('fetchpriority') || false
+            fetchpriority: img.getAttribute('fetchpriority') || false,
+            lazyloaded: img.classList.contains('lazyloaded')
         }));
     });
 
-    for (const image of imageWithFetchPriority) {
+    for (const image of lcpImages) {
         if(image.src === '/wp-content/rocket-test-data/images/600px-Mapang-test.gif' && image.fetchpriority !== false) {
             truthy = true
         }
     }
 
     expect(truthy).toBeTruthy();
 });
+
+Then('lcp image markup is not written to LL format', async function (this: ICustomWorld) {
+    truthy = false;
+
+    for (const image of lcpImages) {
+        if(image.lazyloaded === false) {
+            truthy = true
+        }
+    }
+
+    expect(truthy).toBeTruthy();
+});