fix cpcss tests, updated background to do fresh activation

package.json

@@ -25,6 +25,7 @@
     "test:lcp": "$npm_package_config_testCommand --tags @lcp",
     "test:test": "$npm_package_config_testCommand --tags @test",
     "test:lrc": "$npm_package_config_testCommand --tags @lrc",
+    "test:cpcss": "$npm_package_config_testCommand --tags @cpcss",
     "test:performancehints": "$npm_package_config_testCommand --tags @performancehints",
     "healthcheck": "ts-node healthcheck.ts",
     "wp-env": "wp-env"

src/common/selectors.ts

@@ -63,16 +63,14 @@ export const selectors: Selectors = {
                }
             },
             cpcss:{
-                before: async (page: Page): Promise<boolean> => {
-                    if (! await page.locator("#wpr-radio-async_css").isHidden()) {
-                        return true;
-                    }
-                        page.locator("label[for=optimize_css_delivery]").click()
-                        return true;
-                    },
-                type: FieldType.button,
-                target: "#wpr-radio-async_css",
+                type: FieldType.checkbox,
+                element: "#optimize_css_delivery",
+                target: "label[for=optimize_css_delivery]",
+                after: async (page: Page): Promise<void> => {
+                    await page.locator("#wpr-radio-async_css").click();
+                },
             },
+
             rucss:{
                 type: FieldType.checkbox,
                 element: "#optimize_css_delivery",

src/features/notice.feature

@@ -1,19 +1,21 @@
+@cpcss @setup 
 Feature: CPCSS Notice
 
   Background:
-    Given plugin wp-rocket is activated
-    And I connect as 'admin'
+    Given I am logged in
+    And plugin is installed 'new_release'
+    And plugin is activated
     And I am on the page '/wp-admin/options-general.php?page=wprocket#file_optimization'
 
-  Scenario: Unexpired account with CPCSS and click RUCSS
+  Scenario: Should enable RUCSS and hide notice when clicking turn on RUCSS
     Given I have an unexpired account
     And turn on 'CPCSS'
     Then I must see the banner 'We highly recommend the updated Remove Unused CSS for a better CSS optimization. Load CSS Asynchronously is always available as a back-up.'
     When click on 'Turn on Remove Unused CSS'
     Then I must not see the banner 'Critical CSS generation is currently running'
     Then I must see the banner 'The Remove Unused CSS service is processing your pages'
 
-  Scenario: Unexpired account with CPCSS and click Dismiss
+  Scenario: Should keep the current settings and hide notice when clicking stay with old option 
     When I have an unexpired account
     And turn on 'CPCSS'
     Then I must see the banner 'We highly recommend the updated Remove Unused CSS for a better CSS optimization. Load CSS Asynchronously is always available as a back-up.'
@@ -26,21 +28,22 @@ Feature: CPCSS Notice
     And save the option
     Then I must not see the banner 'We highly recommend the updated Remove Unused CSS for a better CSS optimization. Load CSS Asynchronously is always available as a back-up.'
 
-  Scenario: Unexpired account with CPCSS and go admin homepage
+  Scenario: Should display the CPCSS banner only at WPR settings
     When I have an unexpired account
     And turn on 'CPCSS'
     Then I must see the banner 'We highly recommend the updated Remove Unused CSS for a better CSS optimization. Load CSS Asynchronously is always available as a back-up.'
     When I go '/wp-admin'
     Then I must not see the banner 'We highly recommend the updated Remove Unused CSS for a better CSS optimization. Load CSS Asynchronously is always available as a back-up.'
 
-  Scenario: Expired account with CPCSS
+
+  Scenario: Shouldnot display the CPCSS banner for expired user
     Given turn on 'CPCSS'
     And I have an expired account
     Then I must not see the banner 'We highly recommend the updated Remove Unused CSS for a better CSS optimization. Load CSS Asynchronously is always available as a back-up.'
 
-  Scenario: Unexpired account with CPCSS and other user
+
+  Scenario: Shouldnot display the CPCSS banner to admin 2 if it was dismissed by admin 1
     Given I have an unexpired account
-    And plugin wp-rocket is activated
     And turn on 'CPCSS'
     Then I must see the banner 'We highly recommend the updated Remove Unused CSS for a better CSS optimization. Load CSS Asynchronously is always available as a back-up.'
     When click on 'Turn on Remove Unused CSS'

src/support/steps/steps.ts

@@ -10,24 +10,20 @@
  * @requires {@link ../../../utils/configurations}
  */
 import {expect} from "@playwright/test";
-import {AfterAll, BeforeAll} from "@cucumber/cucumber";
 import wp, {
     activatePlugin,
-    cp,
-    generateUsers,
-    resetWP,
-    rm,
     setTransient
 } from "../../../utils/commands";
-import {configurations, getWPDir} from "../../../utils/configurations";
+import { ICustomWorld } from "../../common/custom-world";
+import {configurations} from "../../../utils/configurations";
 import {match} from "ts-pattern";
 
 const { Given, When, Then } = require("@cucumber/cucumber");
 
 /**
  * Executes the step to set up a WP account based on the provided status.
  */
-Given('I have an {word} account', { timeout: 60 * 1000 }, async function (status) {
+Given('I have an {word} account', { timeout: 60 * 1000 }, async function (this: ICustomWorld, status: string) {
 
 
     const expiration = "unexpired" === status ? Date.now() + 9999999999 : Date.now() - 9999999999;
@@ -62,78 +58,78 @@ Given('I have an {word} account', { timeout: 60 * 1000 }, async function (status
 /**
  * Executes the step to activate a specified WP plugin.
  */
-Given('plugin {word} is activated', async function (plugin) {
+Given('plugin {word} is activated', async function (plugin: string) {
     await activatePlugin(plugin)
 });
 
 /**
  * Executes the step to assert the visibility of a banner with specific text.
  */
-Then('I must see the banner {string}', async function (text) {
-    await expect(this.page.getByText(text)).toBeVisible();
+Then('I must see the banner {string}', async function (this: ICustomWorld, text: string) {
+    await expect(this.page.getByText(text)).toBeVisible({ timeout: 15000 });
 });
 
 /**
  * Executes the step to click on an element with specific text.
  */
-When('click on {string}', function (text) {
-    this.page.getByText(text).click();
+When('click on {string}', async function (this: ICustomWorld, text: string) {
+    await this.page.getByText(text).click();
 });
 
 /**
  * Executes the step to assert the non-visibility of a banner with specific text.
  */
-Then('I must not see the banner {string}', async function (text) {
-    await expect(this.page.getByText(text)).not.toBeVisible();
+Then('I must not see the banner {string}', async function (this: ICustomWorld, text: string) {
+    await expect(this.page.getByText(text)).not.toBeVisible({ timeout: 15000 } );
 });
 
 /**
  * Executes the step to refresh the current page.
  */
-When(/^refresh the page$/, async function () {
+When(/^refresh the page$/, async function (this: ICustomWorld) {
     await this.page.reload();
 });
 
 /**
  * Executes the step to save the options on the page.
  */
-When(/^save the option$/, async function () {
+When(/^save the option$/, async function (this: ICustomWorld) {
     await this.page.click('#wpr-options-submit', {force: true})
 });
 
 /**
  * Executes the step to turn on a specific setting.
  */
-When('turn on {string}', async function (option) {
+When('turn on {string}', async function (this: ICustomWorld, option: string) {
 
     const optionName = match(option)
         .with('CPCSS', () => 'cpcss')
         .otherwise(() => 'rucss')
 
     this.sections.set('fileOptimization');
-    await this.sections.state(true);
+    this.sections.state(true);
     await this.sections.toggle(optionName);
     await this.page.click('#wpr-options-submit', {force: true})
 });
 
 /**
  * Executes the step to navigate to a specific URL.
  */
-When('I go {string}', async function (url) {
+When('I go {string}', async function (this: ICustomWorld, url: string) {
     await this.page.goto(`${configurations.baseUrl}${url}`);
 });
 
 /**
  * Executes the step to connect as a specific user.
  */
-When('I connect as {string}', async function (user) {
-    await this.utils.wpAdminLogout();
-    await this.utils.auth(user);
+When('I connect as {string}', async function (this: ICustomWorld, user: string) {
+   await this.utils.wpAdminLogout();
+    await this.utils.auth();
 });
 
 /**
  * Executes the step to navigate to a specific page.
  */
-Given('I am on the page {string}', {timeout: 10 * 1000} , async function (url) {
+Given('I am on the page {string}', {timeout: 10 * 1000} , async function (this: ICustomWorld, url: string) {
     await this.page.goto(`${configurations.baseUrl}${url}`);
 });