diff --git a/config/wp.config.sample.ts b/config/wp.config.sample.ts index 0c72d60..b5f3f42 100755 --- a/config/wp.config.sample.ts +++ b/config/wp.config.sample.ts @@ -13,6 +13,16 @@ const WP_ADMIN_USER = { } as const; +/** + * The default Imagify settings informations + * + * @constant + * @type {{ API_KEY: string }} + */ +const IMAGIFY_INFOS = { + API_KEY: '' +} as const; + /** * Extracted environment variables related to WordPress configuration. * Uses default values if environment variables are not set. @@ -124,5 +134,6 @@ export { WP_SSH_ADDRESS, WP_SSH_KEY, WP_SSH_ROOT_DIR, - SCENARIO_URLS + SCENARIO_URLS, + IMAGIFY_INFOS }; \ No newline at end of file diff --git a/src/features/ll-lcp.feature b/src/features/ll-lcp.feature index dba2530..527e340 100644 --- a/src/features/ll-lcp.feature +++ b/src/features/ll-lcp.feature @@ -8,17 +8,20 @@ Feature: Lazyload with LCP 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 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 + And plugin is activated + And I go to 'wp-admin/options-general.php?page=imagify' + And I save imagify API key + And display next-gen is enabled on imagify +# 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 +# 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/imagify.ts b/src/support/steps/imagify.ts new file mode 100644 index 0000000..3d5ba1d --- /dev/null +++ b/src/support/steps/imagify.ts @@ -0,0 +1,35 @@ +import { expect } from "@playwright/test"; +import { ICustomWorld } from "../../common/custom-world"; + +import { Given, When, Then } from '@cucumber/cucumber'; +import { IMAGIFY_INFOS } from "../../../config/wp.config"; +import { WP_BASE_URL } from '../../../config/wp.config'; +import { createReference, compareReference } from "../../../utils/helpers"; +import type { Section } from "../../../utils/types"; +import { Page } from '@playwright/test'; +import { + deactivatePlugin, installRemotePlugin, +} from "../../../utils/commands"; + +Given('I save imagify API key', async function (this: ICustomWorld) { + // Check if the API key input field exists on the page + const apiKeyInput = await this.page.$('input#api_key'); + + if (apiKeyInput) { + // Fill the API key input field with the API key from the config + await this.page.fill('input#api_key', IMAGIFY_INFOS.API_KEY); + + // Click the submit button to save the changes + await this.page.click('div.submit.imagify-clearfix input#submit'); + } +}); +Given('display next-gen is enabled on imagify', async function (this: ICustomWorld) { + // Go to Imagify setting page + await this.utils.gotoImagify(); + + // Check the 'Display images in Next-Gen format on the site' checkbox + await this.page.click('label[for="imagify_display_nextgen"]'); + + // Click the submit button to save the changes + await this.page.click('input#submit'); +}); \ No newline at end of file diff --git a/utils/page-utils.ts b/utils/page-utils.ts index 3ac1b56..6df1ba5 100644 --- a/utils/page-utils.ts +++ b/utils/page-utils.ts @@ -115,6 +115,15 @@ export class PageUtils { await this.page.goto(WP_BASE_URL + '/wp-admin/options-general.php?page=wprocket#dashboard'); } + /** + * Navigates to Imagify settings page. + * + * @return {Promise} + */ + public gotoImagify = async (): Promise => { + await this.page.goto(WP_BASE_URL + '/wp-admin/options-general.php?page=imagify'); + } + /** * Navigates to new post on Wordpress. *