hubspot-cms-steps

A standalone webship-js (Playwright + Cucumber-js) test project for websites built on the HubSpot CMS: the cookie consent banner, HubSpot forms, CTA modules, the menu module, and the blog listing module — all in plain-English Gherkin.

It is published to npm as @webship-js/hubspot-cms-steps, and is also a project you can run directly (or fork) to test a HubSpot CMS site. It ships a self-contained demo HubSpot-style site (demo-site/) and a full suite of .feature files, so the suite can be verified in CI without a real HubSpot account.

Installation

To reuse these steps in your own webship-js project:

npm install --save-dev webship-js @webship-js/hubspot-cms-steps

Add both step-definition paths to your project's cucumber.js:

module.exports = {
  default: {
    require: [
      'node_modules/webship-js/tests/step-definitions/**/*.js', // webship-js core steps
      'node_modules/@webship-js/hubspot-cms-steps/tests/step-definitions/hubspot.steps.js', // this plugin
      'tests/step-definitions/**/*.js', // your own custom steps, if any
    ],
    paths: ['tests/features/**/*.feature'],
    worldParameters: {
      launchUrl: process.env.LAUNCH_URL || 'https://your-hubspot-site.example',
    },
  },
};

Repository layout

| Path | Purpose | | --- | --- | | tests/step-definitions/hubspot.steps.js | Custom step definitions for HubSpot-specific behaviour. | | tests/features/ | .feature files testing the demo site's main pages (home, pricing, about, blog, contact). | | demo-site/ | Static demo HubSpot-style site used to exercise the steps in CI. | | .ddev/ | DDEV project config used to serve demo-site/ locally and in CI. | | .github/workflows/ci.yml | GitHub Actions workflow that builds the site with DDEV and runs the suite on every push/PR. |

Running the tests locally

Requires DDEV and Docker.

npm install
npx playwright install --with-deps chromium
ddev start                          # serves demo-site/ at the DDEV project URL
LAUNCH_URL=$(ddev describe -j | node -e "process.stdin.once('data', d => console.log(JSON.parse(d).raw.primary_url))") npm test

Or, without DDEV, using the bundled static server on port 8090:

npm start &                         # serves demo-site/ on http://localhost:8090
npm test

Steps

| Step | Type | | --- | --- | | the page should( not) be a HubSpot page | Then | | I accept the (HubSpot )cookie banner / I decline the (HubSpot )cookie banner | When | | the (HubSpot )cookie banner should( not) be visible / I should( not) see the cookie banner | Then | | I fill in the (HubSpot )form field "<name>" with "<value>" | When | | I submit the (HubSpot )form | When | | the (HubSpot )form should( not) show a success message( containing "<text>") | Then | | I click the (HubSpot )CTA "<label>" | When | | the (HubSpot )CTA "<label>" should( not) link to "<href>" | Then | | the (HubSpot )menu should( not) have a link labeled "<label>" | Then | | the (HubSpot )blog should list at least <n> post(s) | Then | | I open the (HubSpot )blog post titled "<title>" | When |

The product word is optional ("the HubSpot cookie banner" and "the cookie banner" both match), so a feature written for another pack reads here too. Every Then step takes should or should not, every action takes I, we or no pronoun and is registered as a When, and every failure is a friendly message with a hint (no assertion or Playwright stack). Each assertion polls its condition for the minWaitTime.page budget (at least 10 s) instead of reading the page once, and the form submit and CTA click settle the page before the next step. The reference features assert the demo site's own copy, labels and paths (/pricing.html, "Acme Analytics", ...); swap them for your site's content when you copy a feature.

Every step's regex and five Gherkin examples are in the JSDoc block above it in tests/step-definitions/hubspot.steps.js; npm run test:examples checks that each example matches its own step (and no webship-js core step) and that every feature step is defined exactly once. CI runs it before the suite.

Writing a scenario

Feature: Contact page

  Scenario: Visitor submits the contact form
    Given I am on "/contact-us.html"
    When I accept the cookie banner
    And I fill in the form field "email" with "[email protected]"
    And I submit the form
    Then the form should show a success message

Contributing

This project only accepts changes via pull request against the 2.0.x branch.

License

MIT — see LICENSE.