diff --git a/package.json b/package.json index 01666ae..e3eead3 100755 --- a/package.json +++ b/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", diff --git a/src/features/ll-lcp.feature b/src/features/ll-lcp.feature new file mode 100644 index 0000000..dba2530 --- /dev/null +++ b/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 diff --git a/src/support/steps/lcp-beacon-script.ts b/src/support/steps/lcp-beacon-script.ts index fc6c124..426b73a 100644 --- a/src/support/steps/lcp-beacon-script.ts +++ b/src/support/steps/lcp-beacon-script.ts @@ -149,18 +149,21 @@ 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 } @@ -168,3 +171,15 @@ Then('lcp image should have fetchpriority', async function (this: ICustomWorld) 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(); +}); \ No newline at end of file