This is a Crank Cog for basic web interactions, providing steps and assertions for you to run against your website. This Cog leverages Chrome (via Puppeteer) to interact with websites. Puppeteer is configured in a headful manner in order to ensure the highest likelihood possible that websites behave in the same way they do for real humans.
Ensure you have the crank CLI and docker installed and running locally,
then run the following.
$ crank cog:install stackmoxie/web
This Cog does not require any authentication details.
| Name (ID) | Expression | Expected Data |
|---|---|---|
| Check current page info ( CheckCurrentPageInfo) |
the (?<field>status|text|url) of the current page should (?<operator>contain|not contain|be) (?<expectation>.+) |
- field: Page Detail (status, text, or url) - operator: Check Logic (contain, not contain, or be) - expectation: Expected Value |
| Check current page meta tag ( CheckCurrentPageMetaTag) |
the (?<metaName>.+) meta tag on the current page should (?<operator>be|contain|not contain|not be longer than|exist) ?(?<expectation>.+)? |
- metaName: Meta Tag name - operator: Check Logic (be, contain, not contain, not be longer than, exist) - expectation: Expected Value |
| Check that Google Analytics tracked an event ( CheckGoogleAnalyticsEvent) |
google analytics should have tracked an event with category (?<ec>.+) and action (?<ea>.+) for tracking id (?<id>[a-zA-Z0-9-]+) |
- ec: Event Category - ea: Event Action - id: Tracking / Measurement ID associated with the GA instance/property (e.g. UA-75228722-5) - withParameters: Parameter Checks, an optional map of Google Analytics Measurement Protocol Parameters and their expected values. |
| Check that Google Analytics tracked a pageview ( CheckGoogleAnalyticsPageView) |
google analytics should have tracked a pageview for tracking id (?<id>[a-zA-Z0-9-]+) |
- id: Tracking / Measurement ID associated with the GA instance/property (e.g. UA-75228722-5) - withParameters: Parameter Checks, an optional map of Google Analytics Measurement Protocol Parameters and their expected values. |
| Check that a Google Floodlight tag fired ( CheckGoogleFloodlightTag) |
a floodlight tag should have fired for advertiser (?<aid>\d+), group (?<group>[a-zA-Z0-9-_]+), and activity (?<atag>[a-zA-Z0-9-_]+) |
- aid: Advertiser ID - group: Group Tag String - atag: Activity Tag String - cMethod: Counting Method (standard, unique, per session) - withVariables: Custom Variables, an optional map of variable names and their expected values |
| Check a page's Lighthouse performance score ( CheckLighthousePerformance) |
the (?<throttleTo>mobile|desktop) lighthouse performance score should be (?<expectedScore>\d{1,3}) or higher |
- throttleTo: Throttle Level (mobile or desktop) - expectedScore: Expected Score |
| Check that Marketo Munchkin tracking loads ( CheckMarketoMunchkin) |
the tracking code for munchkin account id (?<id>[a-zA-Z0-9-]+) should load |
- id: Munchkin Account ID associated with the user's Marketo instance (e.g. 460-tdh-945) |
| Check for a specific network request ( CheckNetworkRequestStep) |
there should be (?<reqCount>\d+) matching network requests? for (?<baseUrl>.+) |
- reqCount: # of Requests - baseUrl: Base URL Is - pathContains: Path Contains - withParameters: Parameters Include |
| Check that Pardot tracking loads ( CheckPardotTrackingStep) |
the tracking code for pardot account (?<aid>\d+) and campaign (?<cid>\d+) should have loaded |
- aid: Pardot Account ID - cid: Pardot Campaign ID - customDomain: Custom Tracker Domain - withParameters: Parameter Checks, an optional map of query parameters and their expected values. |
| Click an element on a page ( ClickOnElement) |
click the page element (?<domQuerySelector>.+) |
- domQuerySelector: Element's DOM Query Selector |
| Fill out a form field ( EnterValueIntoField) |
fill out (?<domQuerySelector>.+) with (?<value>.+) |
- domQuerySelector: Field's DOM Query Selector - value: Field Value |
| Focus on Frame ( FocusOnFrame) |
focus on the (?<domQuerySelector>.+) frame |
- domQuerySelector: The iframe's DOM query selector, or "main" for the main frame |
| Check that the LinkedIn Conversion Pixel fired ( CheckLinkedInConversionPixelFiredStep) |
the linkedin conversion pixel for partner id (?<pid>\d+) should have fired |
- pid: LinkedIn Partner ID - cid: LinkedIn Conversion ID |
| Check that the LinkedIn Insight tag fired ( CheckLinkedInInsightTagFiredStep) |
the linkedin insight tag for partner id (?<pid>\d+) should have fired |
- pid: LinkedIn Partner ID |
| Navigate to a webpage ( NavigateToPage) |
navigate to (?<webPageUrl>.+) |
- webPageUrl: Page URL |
| Scroll to a percentage depth of a web page ( ScrollTo) |
scroll to (?<depth>\d+)% of the page |
- depth: Percent Depth |
| Submit a form by clicking a button ( SubmitFormByClickingButton) |
submit the form by clicking (?<domQuerySelector>.+) |
- domQuerySelector: Button's DOM Query Selector |
| Check all network requests ( CheckAllNetworkRequestsStep) |
there should be network requests from the page |
- none |
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Please make sure to add or update tests as appropriate.
- Install node.js (v10.x+ recommended)
- Clone this repository.
- Install dependencies via
npm install - Run
npm startto validate the Cog works locally (ctrl+cto kill it) - Run
crank cog:install --source=local --local-start-command="npm start"to register your local instance of this Cog. You may need to append a--forceflag or runcrank cog:uninstall stackmoxie/webif you've already installed the distributed version of this Cog.
Modify code in src/steps and validate your changes by running
crank cog:step stackmoxie/web and selecting your step.
To add new steps, create new step classes in src/steps. Use existing steps as
a starting point for your new step(s). Note that you will need to run
crank registry:rebuild in order for your new steps to be recognized.
Always add tests for your steps in the test/steps folder. Use existing tests
as a guide.
Modify the ClientWrapper class at src/client/client-wrapper.ts.
- If you need to add or modify authentication details, see the
expectedAuthFieldsstatic property. - If you need to expose additional logic from the wrapped API client, add a new ublic method to the wrapper class, which can then be called in any step.
- It's also possible to swap out the wrapped API client completely. You should only have to modify code within this clase to achieve that.
Note that you will need to run crank registry:rebuild in order for any
changes to authentication fields to be reflected. Afterward, you can
re-authenticate this Cog by running crank cog:auth stackmoxie/web
Tests can be found in the test directory and run like this: npm test.
Ensure your code meets standards by running npm run lint.