Enhancing Playwright Helper to Grab Headers

[ryust-ax]

I had a need to retrieve and evaluate header information during landing (amOnPage()) and subsequent transitions or navigations. I took some inspiration from grabBrowserLogs() and came up with the following.

Summary

Wrap the existing Playwright class with an enhancement to register a page.on('response') event listener.
Inspired by an answer by microsoft/playwright#5761 (comment)

Definitions

• Define helper enhancement: project/helpers/playwright.js
  • I haven't figured out how to grab the raw Playwright object through something like require("codeceptjs")
• Provide a headerStore akin to the browserLogStore in helper/Playwright.js
• Set CodeceptJS to use the enhanced helper instead of default Playwright helper

helpers/playwright-extras/Header.js

/**
 * Class to handle interacting with storing header information during navigation
 */
class Header {
  constructor() {
    this._headerEntries = [];
  }

  get entries() {
    return this._headerEntries;
  }

  clear() {
    this._headerEntries = [];
  }

  add(entry) {
    if (Array.isArray(entry)) {
      this._headerEntries = this._headerEntries.concat(entry);
    }
    this._headerEntries.push(entry);
  }
}

module.exports = Header;

helpers/playwright.js

const Playwright = require("../../../node_modules/codeceptjs/lib/helper/Playwright");
const Header = require("./playwright-extras/Header");

const headerStore = new Header();

class PlaywrightEnhanced extends Playwright {
  /**
   * Enhancement to CodeceptJS Playwright method
   * Set current page
   * @param {object} page page to set
   */
  async _setPage(page) {
    await super._setPage(page);

    page.on('response', resp => {
      headerStore.add({
        request: resp.request().headers(),
        response: resp.headers(),
      });
    });
  }

  async grabHeaders() {
    const headers = headerStore.entries;
    headerStore.clear();
    return headers;
  }
}

module.exports = PlaywrightEnhanced;

codecept.conf.js

exports.config = {
    Playwright: {
      require: "./helpers/playwright.js",
      /* rest of the relevant configuration */
   }
};

To Use

Note: My automation relies largely on BDD feature files and page or page-fragment definitions to more dynamically build relevant testing code.
Note: In my case, I'm looking for CSP headers in some transitions.

• Define a BDD step statement
• Define page-fragment file

step_definitions/headers.steps.js

const { CspHeader } = inject();

Then("I detect csp headers", async () => {
  await CspHeader.isDetected();
});

pages/CspHeader.js

const { I } = inject();

/* define helpful variables or functions to build up the expected content-security-policy header value */
const expectedCspString = /*compiled csp string*/;

class CspHeader {
  async isDetected() {
    const collection = await I.grabHeaders();
    const authNavigations = collection.filter((transition) => {
      if (!transition || !transition.request || !transition.request.host) {
        return false;
      }

      return [/*list of expected host(s) in requests*/].includes(
        transition.request.host
      );
    });

    await Promise.all(
      authNavigations.map(({ response }) => {
        const present = response["content-security-policy"];
        return I./* I use a custom chai helper method to assert matching strings `present` to `expectedCspString` */();
      })
    );
  }
}

module.exports = new CspHeader();

codecept.conf.js

exports.config = {
    include: {
      CspHeader: "./pages/CspHeader.js",
   }
  gherkin: {
    features: "./features/**/*.feature",
    steps: Helper.findSteps(__dirname, "step_definitions"),
  },
};

Note: Helper.findSteps() is another class built to explore the step_definitions and compile all contained *.step.js files into an array as expected for the steps property.

Conclusion

I wasn't ready to try contributing to the project in a formal PR but wanted to get this out there in case it was helpful to anyone else.
If anyone has a tip on how to do something like const { Playwright } = require("codeceptjs");, please let me know.