Business Website QA Automation
Run Business Website test scenarios using the Crank BDD framework.
![A Browser Logo](/img/cogs/web.png)
Your website is the front door to your sales and marketing process. Don't just test your website in isolation: validate that you're capturing the right data in the right systems.
Lead Generation Form QA
Fill out a form, then check Marketing Automation for the lead.
- step: Given I navigate to https://example.com
- step: When I enter {{test}} into input[name=Email]
- step: And I submit the form by clicking button[value=Subscribe]
- step: Then the source field on Marketo Lead {{test}} should be Web
Marketing Tag and Pixel QA
Perform a key action, then check that a tag fired.
- step: Given I navigate to https://example.com
- step: When I click the page element a.primary-cta
- step: Then Google Analytics should have tracked an event with category Link and action Click for tracking ID UA-1234-5
What is Crank?
Crank is a BDD test automation framework for SaaS-based business technology.
Developer Getting StartedHosted QA Automation for Business UsersInstalling this Cog
Once you've successfully installed Crank you can install this Cog by running the following:
$ crank cog:install automatoninc/web
That's it! No further installation steps.
Business Website Test Steps
Click an element on a page Action
Use this step in a Scenario file like this:
- step: When I click the page element {{domQuerySelector}}
ID | Type | Description |
---|---|---|
domQuerySelector * | String | Element's DOM Query Selector |
Fill out a form field Action
Use this step in a Scenario file like this:
- step: When I fill out {{domQuerySelector}} with {{value}}
ID | Type | Description |
---|---|---|
domQuerySelector * | String | Field's DOM Query Selector |
value * | Any Scalar | Field Value |
Focus on Frame Action
Use this step in a Scenario file like this:
- step: When I focus on the {{domQuerySelector}} frame
ID | Type | Description |
---|---|---|
domQuerySelector * | String | The iframe's DOM query selector, or "main" for the main frame |
Scroll to a percentage depth of a web page Action
Use this step in a Scenario file like this:
- step: When I scroll to {{depth}}% of the page
ID | Type | Description |
---|---|---|
depth * | Number | Percent Depth |
Submit a form by clicking a button Action
Use this step in a Scenario file like this:
- step: When I submit the form by clicking {{domQuerySelector}}
ID | Type | Description |
---|---|---|
domQuerySelector * | String | Button's DOM Query Selector |
Check a page's Lighthouse performance score Assertion
Use this step in a Scenario file like this:
- step: Then the {{throttleTo}} lighthouse performance score should be {{expectedScore}} or higher
ID | Type | Description |
---|---|---|
throttleTo * | String | Throttle Level (mobile or desktop) |
expectedScore * | Number | Expected Score |
Token | Type | Description |
---|---|---|
{{web.labData.actualScore}} | Number | Performance Score |
{{web.labData.firstContentfulPaint}} | Number | First Contentful Paint |
{{web.labData.firstMeaningfulPaint}} | Number | First Meaningful Paint |
{{web.labData.speedIndex}} | Number | Speed Index |
{{web.labData.firstCpuIdle}} | Number | First CPU Idle |
{{web.labData.timeToInteractive}} | Number | Time to Interactive |
{{web.labData.maxPotentialFirstInputDelay}} | Number | Max Potential First Input Delay |
Check current page info Assertion
Use this step in a Scenario file like this:
- step: Then the {{field}} of the current page should {{operator}} {{expectation}}
ID | Type | Description |
---|---|---|
field * | String | Page Detail (status, text, or url) |
operator * | String | Check Logic (contain, not contain, or be) |
expectation * | Any Scalar | Expected Value |
Check current page meta tag Assertion
Use this step in a Scenario file like this:
- step: Then the {{metaName}} meta tag on the current page should {{operator}} {{expectation}}
ID | Type | Description |
---|---|---|
metaName * | String | Meta Tag name |
operator * | String | Check Logic (be, contain, not contain, not be longer than, exist) |
expectation | Any Scalar | Expected Value |
Check for a specific network request Assertion
Use this step in a Scenario file like this:
- step: Then there should be {{reqCount}} matching network requests for {{baseUrl}}
ID | Type | Description |
---|---|---|
reqCount * | Number | # of Requests |
baseUrl * | URL | Base URL Is |
pathContains | String | Path Contains |
withParameters | Map/Object | Parameters Include |
Check that a Google Floodlight tag fired Assertion
Use this step in a Scenario file like this:
- step: Then a floodlight tag should have fired for advertiser {{aid}}, group {{group}}, and activity {{atag}}
ID | Type | Description |
---|---|---|
aid * | Number | Advertiser ID |
group * | String | Group Tag String |
atag * | String | Activity Tag String |
cMethod | String | Counting Method (standard, unique, per session) |
withVariables | Map/Object | Custom Variables, an optional map of variable names and their expected values |
Check that Google Analytics tracked a pageview Assertion
Use this step in a Scenario file like this:
- step: Then google analytics should have tracked a pageview for tracking id {{id}}
ID | Type | Description |
---|---|---|
id * | String | Tracking / Measurement ID associated with the GA instance/property (e.g. UA-75228722-5) |
withParameters | Map/Object | Parameter Checks, an optional map of Google Analytics Measurement Protocol Parameters and their expected values. |
Token | Type | Description |
---|---|---|
{{web.googleAnalyticsRequest.cid}} | String | Google Analytics Client ID |
{{web.googleAnalyticsRequest.*}} | * | This step may expose additional dynamic tokens representing values on the googleAnalyticsRequest, depending on how you've configured the underlying system. |
Check that Google Analytics tracked an event Assertion
Use this step in a Scenario file like this:
- step: Then google analytics should have tracked an event with category {{ec}} and action {{ea}} for tracking id {{id}}
ID | Type | Description |
---|---|---|
ec * | String | Event Category |
ea * | String | Event Action |
id * | String | Tracking / Measurement ID associated with the GA instance/property (e.g. UA-75228722-5) |
withParameters | Map/Object | Parameter Checks, an optional map of Google Analytics Measurement Protocol Parameters and their expected values. |
Token | Type | Description |
---|---|---|
{{web.googleAnalyticsRequest.cid}} | String | Google Analytics Client ID |
{{web.googleAnalyticsRequest.*}} | * | This step may expose additional dynamic tokens representing values on the googleAnalyticsRequest, depending on how you've configured the underlying system. |
Check that Marketo Munchkin tracking loads Assertion
Use this step in a Scenario file like this:
- step: Then the tracking code for munchkin account id {{id}} should load
ID | Type | Description |
---|---|---|
id * | String | Munchkin Account ID associated with the user's Marketo instance (e.g. 460-tdh-945) |
Check that Pardot tracking loads Assertion
Use this step in a Scenario file like this:
- step: Then the tracking code for pardot account {{aid}} and campaign {{cid}} should have loaded
ID | Type | Description |
---|---|---|
aid * | Number | Pardot Account ID |
cid * | Number | Pardot Campaign ID |
customDomain | URL | Custom Tracker Domain |
withParameters | Map/Object | Parameter Checks, an optional map of query parameters and their expected values. |
Token | Type | Description |
---|---|---|
{{web.pardotTrackingRequest.visitor_id}} | Number | Visitor ID |
{{web.pardotTrackingRequest.*}} | * | This step may expose additional dynamic tokens representing values on the pardotTrackingRequest, depending on how you've configured the underlying system. |
Check that the LinkedIn Conversion Pixel fired Assertion
Use this step in a Scenario file like this:
- step: Then the linkedin conversion pixel for partner id {{pid}} should have fired
data:
cid: 123
ID | Type | Description |
---|---|---|
pid * | Number | LinkedIn Partner ID |
cid * | Number | LinkedIn Conversion ID |
Check that the LinkedIn Insight tag fired Assertion
Use this step in a Scenario file like this:
- step: Then the linkedin insight tag for partner id {{pid}} should have fired
ID | Type | Description |
---|---|---|
pid * | Number | LinkedIn Partner ID |
Missing a Step You Need?
This Cog is open source! Your contributions are welcome and encouraged.
Contribute on GitHubJoin the Crank Spectrum Community