protractor-cucumber-mink v0.6.0

protractor-cucumber-mink

Gherkin (cucumber) BDD step library built protractor intended for for testing Angular apps.

Uses protractor-cucumber-framework to wire protractor to cucumber.

Getting Started

npm install --save-dev cucumber protractor-cucumber-framework

protractor.conf.js

exports.config = {

  // change if you use a different base URL
  // this will effect set the baseUrl used in Navigation step library
  baseUrl: 'http://locahost:4200/',

  capabilities: {
    browserName:'chrome'
  },

  // this wires together protractor and cucumber
  framework: 'custom',
  frameworkPath: require.resolve('protractor-cucumber-framework'),

  // require feature files
  specs: [
    './e2e/features/**/*.feature'
  ],

  cucumberOpts: {
    require: [
      // include this step library
      path.resolve(process.cwd(), './node_modules/protractor-cucumber-mink'),
      // point this to wherever your own steps live
      path.resolve(process.cwd(), './e2e/**/*.steps.js'),
    ],
  },
  // https://github.com/angular/protractor/issues/4378
  directConnect: true,
};

Steps

Table of Contents

• Action
  • click
  • hover
  • submit
  • press
  • follow
  • sendKey
• element
  • any
  • input
• AssertDOM
  • html contains
  • html not contains
  • html match
  • html not match
  • html element count
  • element contains
  • element not contains
  • element visible
  • element not visible
  • element exists
  • element not exists
• AssertForm
  • select value
  • input value
  • input not value
  • input enabled
  • input disabled
  • checkbox checked
  • checkbox unchecked
• AssertURL
  • on homepage
  • url
  • url match
  • url query match
• Form
  • fill field
  • fill multiple
  • choose in select
  • check
  • uncheck
• Navigation
  • base url
  • homepage
  • browse
  • reload
  • back
• Utility
  • screenshot
  • viewport
  • wait

Action

click

Click on an element based on given selector.

/^(?:|I )click on (?:|the )"(^"*)"/

Parameters

• selector string Selector of target element

Examples

When I click on "button.showModal"

When I click on the "input[type='submit']"

Returns Promise Resolves after action completes

hover

Hover an element with cursor (activate CSS :hover property).

/^(?:|I )hover (?:|over ) (?:|the)"(^"*)" element/

Parameters

• selector string Selector of target element

Examples

When I hover "nav.menu" element

When I hover the "select:eq(1)" element

Returns Promise Resolves after action completes

submit

Submits a form found by given selector. The submit command may also be applied to any element that is a descendant of a form element.

/^(?:|I )submit (?:|the )"(^"*)" form/

Parameters

• selector string Selector of target element

Examples

When I submit "form#register" form

When I submit the "form.login" form

Returns Promise Resolves after action completes

press

Press a button element with string argument interpreted as (in order): 1. CSS Selector 2. Partial text of button and input (of type="submit") elements 3. Partial text of link elements

/^(?:|I )press "(^"*)"/

Parameters

• selector string Selector of target element

Examples

When I press "button.register"
And I press "Register"
And I press "Submit"

Returns Promise Resolves after action completes

follow

Follow a link element with string argument interpreted as (in order): 1. CSS Selector 3. Partial text of link elements

/^(?:|I )follow "(^"*)"/

Parameters

• selector string Selector of target element

Examples

When I follow "a[href='/about']"

Returns Promise Resolves after action completes

sendKey

Send the key(s) to the matched element

/^(?:|I )send key "(^")" in "(^")" element/

/^(?:|I )type "(^")" in(?:|to) (?:|the )"(^")" element/

Parameters

• key string Key(s) to send
• selector string Selector of target element

Examples

When I send key "Matthew" in "input[name='firstname']" element

When I type "Matthew" into the "input[name='firstname']" element

Returns Promise Resolves after action completes

element

any

Attempts to find a single element by trying each of the provided Locators in the order provided.

Parameters

• finders ...webdriver.Locator List of Locators to check

Examples

const { by } = require('protractor');
const { element } = require('protractor-cucumber-mink');
const { When } = require('cucumber');
When('I click the {string} input', function (selector) {
  return element.any(by.css('.alert'), by.name('alert'), by.binding('messages.alert')).click();
});

Returns Promise<ElementFinder> The ElementFinder for the first matched element

input

Attempts to find a single input element using the following methods: 1. By CSS selector (by.css) 2. By name (by.name) 3. By angular model (by.selector) 4. By angular reflected name (by.reflectedName) 4. By input label text to get ID (by.inputLabelText) 5. By angular binding (by.binding)

Parameters

• selector string Query to look up using each of the available methods

Examples

const { element } = require('protractor-cucumber-mink');
const { When } = require('cucumber');
When('I click the {string} input', function (selector) {
  return element.input(selector)
   .then(function(input) {
     return input.click();
   });
});

Returns Promise<ElementFinder> The ElementFinder

AssertDOM

html contains

Assert page sources (with tags) contains the provided string.

/^(?:|I )should see "(^"*)"$/

Parameters

• expected string The text content expected to be present

Examples

Then I should see "Home Page"

Returns Promise Resolves if assertion passes

html not contains

Assert page sources (with tags) contains the provided string.

/^(?:|I )should not see "(^"*)"$/

Parameters

• expected string The text content expected to be present

Examples

Then I should not see "Detail Page"

Returns Promise Resolves if assertion passes

html match

Assert page sources (with tags) match the provided RegExp.

/^(?:|I ) should see text matching (.+)$/

Parameters

• regex RegExp Regular expression

Examples

Then I should see text matching Post-\d+

Returns Promise Resolves if assertion passes

html not match

Assert page sources (with tags) do not match the provided RegExp.

/^(?:|I )should not see text matching (.+)$/

Parameters

• regex RegExp Regular expression

Examples

Then I should not see text matching .+@.+

Returns Promise Resolves if assertion passes

html element count

Assert page contains n number of number of DOM-elements with the provided CSS Selector.

/^(?:|I )should see (\d+) "(^"*)" elements?$/

Parameters

• expected integer The expected count
• selector string Selector of target element

Examples

Then I should see 3 "section.post" elements

Returns Promise Resolves if assertion passes

element contains

Assert DOM-element with the provided CSS Selector contains the provided text.

/^(?:|I )should see "(^")" in the "(^")" element$/

/^(?:|I )should see "(^")" in the "(^")" element(?:|'s) text$/

Parameters

• expected string Regular expression
• selector string Selector of target element

Examples

Then I should see "Home Page" in the "h1" element

Then I should see "Login" in the "h1" element text

Then I should see "Login" in the "h1" element's text

Returns Promise Resolves if assertion passes

element not contains

Assert DOM-element(s) with the provided CSS Selector do not contains the provided text.

/^(?:|I )should not see "(^")" in the "(^")" element$/

/^(?:|I )should not see "(^")" in the "(^")" element text$/,

Parameters

• expected string Regular expression
• selector string Selector of target element

Examples

Then I should not see "Post Detail Page" in the "h1" element

Then I should not see "Register" in the "h1" element text

Returns Promise Resolves if assertion passes

element visible

Assert if the selected DOM-element found by given selector is visible.

/^I should see an? "(^"*)" element$/

/the "(^"*)" element should be visible$/

Parameters

• selector string Selector of target element

Examples

Then I should see an "h2.content-subhead" element

Then the ".alert.alert-danger" element should be visible

Returns Promise Resolves if assertion passes

element not visible

Assert if the selected DOM-element found by given selector is not visible.

/^I should not see an? "(^")" element$/ /the "(^")" element should not be visible$/

Parameters

• selector string Selector of target element

Examples

Then I should not see an "h2.content-subhead" element

Then the ".alert.alert-danger" element should not visible

Returns Promise Resolves if assertion passes

element exists

Assert that at least one element exits matching given selector.

/^the "(^"*)" element should exist$/

/there should be an? "(^"*)" element$/

Parameters

• selector string Selector of target element

Examples

Then the "h2.content-subhead" element should exist

Then there should be a "span.warning" element

Returns Promise Resolves if assertion passes

element not exists

Assert that no element exists matching given selector.

/^the "(^")" element should exist$/ /there should not be an? "(^")" element$/

Parameters

• selector string Selector of target element

Examples

Then the "h2.content-subhead" element should not exist

Then there should not be a "button" element

Returns Promise Resolves if assertion passes

AssertForm

select value

Assert the currently selected option of a select field contains provided text.

/^the "(^")" current option contain "(^")"$/

Parameters

• selector string Selector of target element
• expected string Text content of the expected selected option

Examples

Then the "select[name='country']" current option contain "USA"

Returns Promise Resolves if assertion passes

input value

Assert if the input’s value of given selector contains provided text.

/^the "(^")" field should contain "(^")"$/

Parameters

• selector string Selector of target element
• expected string Text content of the expected value

Examples

Then the "textarea[name='description']" field should contain "My text"

Returns Promise Resolves if assertion passes

input not value

Assert if the input’s value of given selector do not contains provided text.

/^the "(^")" field should not contain "(^")"$/

Parameters

• selector string Selector of target element
• expected string Text content of the value to check does not exist

Examples

Then the "textarea[name='description']" field should not contain "My first name"

Returns Promise Resolves if assertion passes

input enabled

Assert that the element matching given selector is enabled

/the "(^"*)" (?:field|element) should be enabled$/

Parameters

• selector string Selector of target element

Examples

Then the "input[type='submit']" element should be enabled

Returns Promise Resolves if assertion passes

input disabled

Assert that the element matching given selector is disabled

/the "(^"*)" (?:field|element) should be disabled/

Parameters

• selector string Selector of target element

Examples

Then the "input[type='submit']" element should be disabled

Returns Promise Resolves if assertion passes

checkbox checked

Assert that the element matching given selector is checked

/the "(^"*)" checkbox should be checked$/

/the checkbox "(^"*)" (?:is|should be) checked$/

Parameters

• selector string Selector of target element

Examples

Then the "input[name='agree']" checkbox should be checked

Then the checkbox "input[name='agree']" should be checked

Returns Promise Resolves if assertion passes

checkbox unchecked

Assert that the element matching given selector is unchecked

/the "(^"*)" checkbox should not be checked$/

/the checkbox "(^"*)" should (?:be unchecked|not be checked)$/

/the checkbox "(^"*)" is (?:unchecked|not checked)$/

Parameters

• selector string Selector of target element

Examples

Then the "#checkbox-input" checkbox should not be checked

Then the checkbox "#checkbox-input" should not be checked

Then the checkbox "#checkbox-input" is unchecked

Returns Promise Resolves if assertion passes

AssertURL

on homepage

Assert current URL pathname equals ‘/’.

/^(?:|I )should be on "(^"*)"/

Examples

Then I should be on the homepage

Returns Promise Resolves if assertion passes

url

Assert current URL pathname equals the given string.

/^(?:|I )should be on "(^"*)"$/

Parameters

• location

Examples

Then I should be on "/post/1"

Returns Promise Resolves if assertion passes

url match

Assert current URL pathname match against provided RegExp.

/the url should match (.+)/

Parameters

• regex

Examples

Then the url should match ^\/post\/\d+

Returns Promise Resolves if assertion passes

url query match

Assert current URL query string match against provided RegExp.

/^the url parameter should match (.+)$/

Parameters

• regex

Examples

Then the url parameter should match ^\/post\/\d+

Returns Promise Resolves if assertion passes

Form

fill field

Send a sequence of key strokes to an element (clears value before). You can also use unicode characters like Left arrow or Back space. See the protract sendKeys method documentation

/^(?:|I )fill in "(^")" with "(^")"$/

/^(?:|I )fill in "(^"*)" with:$/

Parameters

• selector string Css selector matching the target field element
• value string The text content to send

Examples

Then I fill in "input[name='first_name']" with:
"""
My long multi-line text ...
"""

Returns Promise Resolves when the action completes

fill multiple

Send a sequence of key strokes to an element (clears value before). You can also use unicode characters like Left arrow or Back space. See the protract sendKeys method documentation

/^(?:|I )fill in the following:$/

Parameters

• hashDataTable object List of key:value pairs of data to fieldElement

Examples

When I fill in the following:
| "First name"                    | John |
| "Last name"                     | Doe           |
| "textarea[name='description']"  | Some text ... |

Returns Promise Resolves when the action completes

choose in select

Select option that display text matching the argument.

/^(?:|I )select "(^")" from "(^")"$/

Parameters

• option string Text content of the option
• selector string Css selector matching the target field element

Examples

Then I select "France" from "select.country"

Returns Promise Resolves when the action completes

check

Check the checkbox with provided selector.

/^(?:|I )check "(^"*)"$/

Parameters

• selector string Css selector matching the target field element

Examples

Then I check "#checkbox-input"

Returns Promise Resolves when the action completes

uncheck

Uncheck the checkbox with provided selector.

/^(?:|I )uncheck "(^"*)"$/

Parameters

• selector string Css selector matching the target field element

Examples

Then I uncheck "#checkbox-input-next"

Returns Promise Resolves when the action completes

Navigation

base url

Set driver’s baseUrl. Useful to use short path in subsequent navigation (ex: “/login”)

/^(?:|I )browse "(^"*)"/

Parameters

• location string The base URL as a full, absolute URL

Examples

When I browse "http://127.0.0.1:3000/

Returns Promise Resolves when the action completes

homepage

Navigate to homepage, ie: baseUrl + ‘/’

/^(?:|I )am on (?:|the )homepage$/

/^(?:|I )go to (?:|the )homepage/

Examples

When I am on the homepage

When I go to the homepage

When I go to homepage

Returns Promise Resolves when the action completes

browse

Browse given URL or path. Protractor assumes it is an angular page

/^(?:|I )am on "(^"*)"/

/^(?:|I )go to "(^"*)"/

Parameters

• location string Path to browse to, either absolute or relative

Examples

When I am on "/post/2"

When I go to "/articles/why-to-use-cucumber"

Returns Promise Resolves when action completes

reload

Reload the current page.

/^(?:|I )reload the page/

Examples

When I reload the page

Returns Promise Resolves when action completes

back

Navigate backwards in the browser history, if possible.

/^(?:|I )move backward one page/

Examples

When I move backward one page

Returns Promise Resolves when action completes

Utility

screenshot

Take a screenshot of the current viewport and save it at ./screenshot.png

/^(?:|I )take a screenshot/

Parameters

• width int Desired view width
• height int Desired view height

Examples

Then I take a screenshot

Returns Promise Resolves when action completes

viewport

Set browser viewport size, width and height in pixel. The default viewport is: { width: 1366, height: 768 } (most used screen resolution).

/the viewport is (\d+)px width and (\d+)px height/

Parameters

• width int Desired view width
• height int Desired view height

Examples

When the viewport is 360px width and 568px height

Returns Promise Resolves when action completes

wait

Wait for N seconds.

/^(?:|I )wait (\d+) seconds?/

Parameters

• seconds Number Number of seconds to wait

Examples

Then I wait 10 seconds

Returns Promise Resolves when action completes

Utils

Table of Contents

• by
  • reflectedName
  • inputLabelText
• element
  • any
  • input

by

reflectedName

Finds element by the angular reflected name

Parameters

• args Array Arguments passed to this Locator
• opt_parentElement Element Parent element (optional, default document)

Examples

const { by, element } = require('protractor-cucumber-mink');
const { When } = require('cucumber');
When('I click the input with reflected name "{string}"', function (selector) {
  return element(by.reflectedName(selector)).click();
});

Returns NodeList Array of matched DOM elements

inputLabelText

Finds elements corresponding to their labels by the text itself

Parameters

• args Array Arguments passed to this Locator
• opt_parentElement Element Parent element (optional, default document)

Examples

const { by } = require('protractor-cucumber-mink');
const { When } = require('cucumber');
When('I click the input labeled "{string}"', function (labelText) {
  return element(by.inputLabelText(labelText)).click();
});

Returns NodeList Array of matched DOM elements

element

any

Attempts to find a single element by trying each of the provided Locators in the order provided.

Parameters

• finders ...webdriver.Locator List of Locators to check

Examples

const { by } = require('protractor');
const { element } = require('protractor-cucumber-mink');
const { When } = require('cucumber');
When('I click the {string} input', function (selector) {
  return element.any(by.css('.alert'), by.name('alert'), by.binding('messages.alert')).click();
});

Returns Promise<ElementFinder> The ElementFinder for the first matched element

input

Attempts to find a single input element using the following methods: 1. By CSS selector (by.css) 2. By name (by.name) 3. By angular model (by.selector) 4. By angular reflected name (by.reflectedName) 4. By input label text to get ID (by.inputLabelText) 5. By angular binding (by.binding)

Parameters

• selector string Query to look up using each of the available methods

Examples

const { element } = require('protractor-cucumber-mink');
const { When } = require('cucumber');
When('I click the {string} input', function (selector) {
  return element.input(selector)
   .then(function(input) {
     return input.click();
   });
});

Returns Promise<ElementFinder> The ElementFinder