playwright-cucumber-steps

v1.6.0

Published

11 days ago

Cucumber steps (step definitions) written with Playwright for end-to-end (e2e) tests

playwright-cucumber-steps

Cucumber steps (step definitions) written with Playwright for end-to-end (e2e) tests

List of predefined steps

Note: see all steps usage examples in:
i-steps-test1.feature
i-steps-test2.feature

Note: if you are using TypeScript, don't forget to add PageModel interface to your page-objects:
// tests/page-objects/my-page.ts

interface PageModel {
    [key: string]: any;
}

const myPage: PageModel = {
    // ...
};

export default myPage;

Given steps

I/user go(es) to URL "..." - open a site (by its URL provided in "" as a string) in the current browser window/tab. For example:
```
# my-test.feature

Given I go to URL "https://github.com/Marketionist"
```

I/user go(es) to "..."."..." - open a site (by its URL provided in "page"."element") in the current browser window/tab. For example:

# tests/features/my-account.feature

Given I go to "my-page"."urlMyAccount"

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    urlMyAccount: 'https://github.com/Marketionist',
    // ...
};

I/user go(es) to ... from ... - open a site (by its URL provided in element from page) in the current browser window/tab. For example:

# tests/features/my-account.feature

Given I go to urlMyAccount from my-page

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    urlMyAccount: 'https://github.com/Marketionist',
    // ...
};

I/user send(s) "..." request to "..." with body "..." - send request (request method provided in "" as a string) to URL (provided in "" as a string) with body (provided in "" as a string with a JSON object inside). For example:
```
# tests/features/my-test-api.feature

Given I send "POST" request to "http://httpbin.org/post" with body "{ \"test1\": 1, \"test2\": 2 }"
```

I/user send(s) "..." request to "..." with body "..."."..." - send request (request method provided in "" as a string) to URL (provided in "" as a string) with body (provided in "page"."element" as a JSON object or as a string with a JSON object inside). For example:

# tests/features/my-test-api.feature

Given I send "POST" request to "http://httpbin.org/post" with body "my-test-api-page"."bodyTestString"

// tests/page-objects/my-test-api-page.ts

const myTestApiPage = {
    // ...
    bodyTestString: '{"items":3,"item1":"nice","item2":true,"item3":[1,2,3]}',
    // OR
    bodyTestJson: { items: 3, item1: 'nice', item2: true, item3: [1, 2, 3,], },
    // ...
};

I/user send(s) "..." request to "..."."..." with body "..."."..." - send request (request method provided in "" as a string) to URL (provided in "page1"."element1" as a string) with body (provided in "page2"."element2" as a JSON object or as a string with a JSON object inside). For example:

# tests/features/my-test-api.feature

Given I send "POST" request to "my-test-api-page"."urlTestRequest" with body "my-test-api-page"."bodyTestJson"

// tests/page-objects/my-test-api-page.ts

const myTestApiPage = {
    // ...
    urlTestRequest: 'http://httpbin.org/post',
    bodyTestJson: { items: 3, item1: 'nice', item2: true, item3: [1, 2, 3,], },
    // ...
};

I/user send(s) "..." request to ... from ... with body ... from ... - send request (request method provided in "" as a string) to URL (provided in element1 from page1 as a string) with body (provided in element2 from page2 as a JSON object or as a string with a JSON object inside). For example:

# tests/features/my-test-api.feature

Given I send "POST" request to urlTestRequest from my-test-api-page with body bodyTestString from my-test-api-page

// tests/page-objects/my-test-api-page.ts

const myTestApiPage = {
    // ...
    urlTestRequest: 'http://httpbin.org/post',
    bodyTestString: '{"items":3,"item1":"nice","item2":true,"item3":[1,2,3]}',
    // ...
};

I/user send(s) "..." request to "..." with headers "..." and body "..." - send a request (request method provided in "" as a string) to URL (provided in "" as a string) with headers (provided in "" as a string with a JSON object inside) and body (provided in "" as a string with a JSON object inside). For example:
```
# tests/features/my-test-api.feature

Given I send "POST" request to "http://httpbin.org/post" with headers "{ \"Content-Type\": \"application/json\", \"Authorization\": \"Bearer aBcD1234\" }" and body "{ \"test1\": 1, \"test2\": 2 }"
```

I/user send(s) "..." request to "..." with headers "..."."..." and body "..."."..." - send a request (request method provided in "" as a string) to URL (provided in "" as a string) with headers (provided in "page1"."element1" as a JSON object or as a string with a JSON object inside) and body (provided in "page2"."element2" as a JSON object or as a string with a JSON object inside). For example:

# tests/features/my-test-api.feature

Given I send "POST" request to "http://httpbin.org/post" with headers "my-test-api-page"."headersTestString" and body "my-test-api-page"."bodyTestString"

// tests/page-objects/my-test-api-page.ts

const myTestApiPage = {
    // ...
    headersTestString: '{"content-type":"application/json"}',
    bodyTestString: '{"items":3,"item1":"nice","item2":true,"item3":[1,2,3]}',
    // OR
    headersTestJson: { 'content-type': 'application/json', },
    bodyTestJson: { items: 3, item1: 'nice', item2: true, item3: [1, 2, 3,], },
    // ...
};

I/user send(s) "..." request to "..."."..." with headers "..."."..." and body "..."."..." - send a request (request method provided in "" as a string) to URL (provided in "page1"."element1" as a string) with headers (provided in "page2"."element2" as a JSON object or as a string with a JSON object inside) and body (provided in "page3"."element3" as a JSON object or as a string with a JSON object inside). For example:

# tests/features/my-test-api.feature

Given I send "POST" request to "my-test-api-page"."urlTestRequest" with headers "my-test-api-page"."headersTestString" and body "my-test-api-page"."bodyTestString"

// tests/page-objects/my-test-api-page.ts

const myTestApiPage = {
    urlTestRequest: 'http://httpbin.org/post',
    // ...
    headersTestString: '{"content-type":"application/json"}',
    bodyTestString: '{"items":3,"item1":"nice","item2":true,"item3":[1,2,3]}',
    // OR
    headersTestJson: { 'content-type': 'application/json', },
    bodyTestJson: { items: 3, item1: 'nice', item2: true, item3: [1, 2, 3,], },
    // ...
};

I/user send(s) "..." request to ... from ... with headers ... from ... and body ... from ... - send a request (request method provided in "" as a string) to URL (provided in element1 from page1 as a string) with headers (provided in element2 from page2 as a JSON object or as a string with a JSON object inside) and body (provided in element3 from page3 as a JSON object or as a string with a JSON object inside). For example:

# tests/features/my-test-api.feature

Given I send "POST" request to urlTestRequest from my-test-api-page with headers headersTestString from my-test-api-page and body bodyTestString from my-test-api-page

// tests/page-objects/my-test-api-page.ts

const myTestApiPage = {
    urlTestRequest: 'http://httpbin.org/post',
    // ...
    headersTestString: '{"content-type":"application/json"}',
    bodyTestString: '{"items":3,"item1":"nice","item2":true,"item3":[1,2,3]}',
    // OR
    headersTestJson: { 'content-type': 'application/json', },
    bodyTestJson: { items: 3, item1: 'nice', item2: true, item3: [1, 2, 3,], },
    // ...
};

I/user send(s) "..." request to "..." with body: - send request (request method provided in "" as a string) to URL (provided in "" as a string) with body (provided in """""" as a doc string with a JSON object inside). For example:
```
# tests/features/my-test-api.feature

Given I send "POST" request to "http://localhost:8001/post" with body:
"""
{
  "username": "testuser",
  "email": "[email protected]",
  "active": true
}
"""
```

I/user send(s) "..." request to "..."."..." with body: - send request (request method provided in "" as a string) to URL (provided in "page"."element" as a string) with body (provided in """""" as a doc string with a JSON object inside). For example:

# tests/features/my-test-api.feature

Given I send "POST" request to "my-test-api-page"."urlTestRequest" with body:
"""
{
  "username": "testuser",
  "email": "[email protected]",
  "active": true
}
"""

// tests/page-objects/my-test-api-page.ts

const myTestApiPage = {
    // ...
    urlTestRequest: 'http://httpbin.org/post',
    // ...
};

I/user send(s) "..." request to ... from ... with body: - send request (request method provided in "" as a string) to URL (provided in element from page as a string) with body (provided in """""" as a doc string with a JSON object inside). For example:

# tests/features/my-test-api.feature

Given I send "POST" request to urlTestRequest from my-test-api-page with body:
"""
{
  "username": "testuser",
  "email": "[email protected]",
  "active": true
}
"""

// tests/page-objects/my-test-api-page.ts

const myTestApiPage = {
    // ...
    urlTestRequest: 'http://httpbin.org/post',
    // ...
};

I/user send(s) "..." request to "..." with headers and body: - send request (request method provided in "" as a string) to URL (provided in "" as a string) with headers and body (provided in """""" as a doc string with a JSON object inside). For example:

# tests/features/my-test-api.feature

Given I send "POST" request to "http://localhost:8001/post" with headers and body:
"""
{
  "headers": {
    "Content-Type": "application/json",
    "Authorization": "Bearer aBcD1234"
  },
  "body": {
    "username": "testuser",
    "email": "[email protected]",
    "active": true
  }
}
"""

I/user send(s) "..." request to "..."."..." with headers and body: - send request (request method provided in "" as a string) to URL (provided in "page"."element" as a string) with headers and body (provided in """""" as a doc string with a JSON object inside). For example:

# tests/features/my-test-api.feature

Given I send "POST" request to "my-test-api-page"."urlTestRequest" with headers and body:
"""
{
  "headers": {
    "Content-Type": "application/json",
    "Authorization": "Bearer aBcD1234"
  },
  "body": {
    "username": "testuser",
    "email": "[email protected]",
    "active": true
  }
}
"""

// tests/page-objects/my-test-api-page.ts

const myTestApiPage = {
    // ...
    urlTestRequest: 'http://httpbin.org/post',
    // ...
};

I/user send(s) "..." request to ... from ... with headers and body: - send request (request method provided in "" as a string) to URL (provided in element from page as a string) with headers and body (provided in """""" as a doc string with a JSON object inside). For example:

# tests/features/my-test-api.feature

Given I send "POST" request to urlTestRequest from my-test-api-page with headers and body:
"""
{
  "headers": {
    "Content-Type": "application/json",
    "Authorization": "Bearer aBcD1234"
  },
  "body": {
    "username": "testuser",
    "email": "[email protected]",
    "active": true
  }
}
"""

// tests/page-objects/my-test-api-page.ts

const myTestApiPage = {
    // ...
    urlTestRequest: 'http://httpbin.org/post',
    // ...
};

When steps

I/user click(s) "..."."..." - click on the element (provided in "page"."element" as CSS or XPath selector). For example:

# tests/features/my-account.feature

When I click "my-page"."linkTest2Page"

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    linkTest2Page: '#link-test2-page',
    // OR
    linkTest2PageXPath: '//*[@id="link-test2-page"]',
    // ...
};

I/user click(s) ... from ... - click on the element (provided in element from page as CSS or XPath selector). For example:

# tests/features/my-account.feature

When I click linkTest2PageXPath from my-page

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    linkTest2Page: '#link-test2-page',
    // OR
    linkTest2PageXPath: '//*[@id="link-test2-page"]',
    // ...
};

I/user right click(s) "..."."..." - right click on the element (provided in "page"."element" as a CSS or XPath selector). For example:

# tests/features/my-account.feature

When I right click "my-page"."linkTest2Page"

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    linkTest2Page: '#link-test2-page',
    // OR
    linkTest2PageXPath: '//*[@id="link-test2-page"]',
    // ...
};

I/user right click(s) ... from ... - right click on the element (provided in element from page as a CSS or XPath selector). For example:

# tests/features/my-account.feature

When I right click linkTest2PageXPath from my-page

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    linkTest2Page: '#link-test2-page',
    // OR
    linkTest2PageXPath: '//*[@id="link-test2-page"]',
    // ...
};

I/user double click(s) "..."."..." - double click on the element (provided in "page"."element" as a CSS or XPath selector). For example:

# tests/features/my-account.feature

When I double click "my-page"."linkTest2Page"

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    linkTest2Page: '#link-test2-page',
    // OR
    linkTest2PageXPath: '//*[@id="link-test2-page"]',
    // ...
};

I/user double click(s) ... from ... - double click on the element (provided in element from page as a CSS or XPath selector). For example:

# tests/features/my-account.feature

When I double click linkTest2PageXPath from my-page

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    linkTest2Page: '#link-test2-page',
    // OR
    linkTest2PageXPath: '//*[@id="link-test2-page"]',
    // ...
};

I/user click(s) "..."."..." if present - click on the element (provided in "page"."element" as a CSS or XPath selector) only if it is present on the page. For example:

# tests/features/my-account.feature

When I click "my-page"."linkTest2Page" if present

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    linkTest2Page: '#link-test2-page',
    // OR
    linkTest2PageXPath: '//*[@id="link-test2-page"]',
    // ...
};

I/user click(s) ... from ... if present - click on the element (provided in element from page as a CSS or XPath selector) only if it is present on the page. For example:

# tests/features/my-account.feature

When I click linkTest2PageXPath from my-page if present

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    linkTest2Page: '#link-test2-page',
    // OR
    linkTest2PageXPath: '//*[@id="link-test2-page"]',
    // ...
};

I/user type(s) "..." into "..."."..." - type the text (provided in "" as a string) into the input field (provided in "page"."object" as a CSS or XPath selector). For example:

# tests/features/my-account.feature

When I type "Green" into "my-page"."inputColors"

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    inputColors: '#input-colors',
    // OR
    inputColorsXPath: '//*[@id="input-colors"]',
    // ...
};

I/user type(s) "..." into ... from ... - type the text (provided in "" as a string) into the input field (provided in object from page as a CSS or XPath selector). For example:

# tests/features/my-account.feature

When I type "Green" into inputColorsXPath from my-page

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    inputColors: '#input-colors',
    // OR
    inputColorsXPath: '//*[@id="input-colors"]',
    // ...
};

I/user type(s) "..."."..." into "..."."..." - type the text (provided in "page1"."element1" as a string) into the input field (provided in "page2"."element2" as a CSS or XPath selector). For example:

# tests/features/my-account.feature

When I type "my-page"."textGold" into "my-page"."inputColors"

// tests/page-objects/my-page.ts

const myPage = {
    textGold: 'Gold',
    // ...
    inputColors: '#input-colors',
    // OR
    inputColorsXPath: '//*[@id="input-colors"]',
    // ...
};

I/user type(s) ... from ... into ... from ... - type the text (provided in element1 from page1 as a string) into the input field (provided in element2 from page2 as a CSS or XPath selector). For example:

# tests/features/my-account.feature

When I type textGold from my-page into inputColorsXPath from my-page

// tests/page-objects/my-page.ts

const myPage = {
    textGold: 'Gold',
    // ...
    inputColors: '#input-colors',
    // OR
    inputColorsXPath: '//*[@id="input-colors"]',
    // ...
};

I/user clear(s) "..."."..." and type(s) "..." - clear the input field (provided in "page"."element" as a CSS or XPath selector) and type the text (provided in "" as a string). For example:

# tests/features/my-account.feature

When I clear "my-page"."inputColors" and type "Green"

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    inputColors: '#input-colors',
    // OR
    inputColorsXPath: '//*[@id="input-colors"]',
    // ...
};

I/user clear(s) ... from ... and type(s) "..." - clear the input field (provided in element from page as a CSS or XPath selector) and type the text (provided in "" as a string). For example:

# tests/features/my-account.feature

When I clear inputColorsXPath from my-page and type "Green"

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    inputColors: '#input-colors',
    // OR
    inputColorsXPath: '//*[@id="input-colors"]',
    // ...
};

I/user clear(s) "..."."..." and type(s) "..."."..." - clear the input field (provided in "page1"."element1" as a CSS or XPath selector) and type the text (provided in "page2"."element2" as a string). For example:

# tests/features/my-account.feature

When I clear "my-page"."inputColors" and type "my-page"."textGold"

// tests/page-objects/my-page.ts

const myPage = {
    textGold: 'Gold',
    // ...
    inputColors: '#input-colors',
    // OR
    inputColorsXPath: '//*[@id="input-colors"]',
    // ...
};

I/user clear(s) ... from ... and type(s) ... from ... - clear the input field (provided in element1 from page1 as a CSS or XPath selector) and type the text (provided in element2 from page2 as a string). For example:

# tests/features/my-account.feature

When I clear inputColorsXPath from my-page and type textGold from my-page

// tests/page-objects/my-page.ts

const myPage = {
    textGold: 'Gold',
    // ...
    inputColors: '#input-colors',
    // OR
    inputColorsXPath: '//*[@id="input-colors"]',
    // ...
};

I/user select(s) "..." in "..."."..." - select the option (provided in "" as a string) in the dropdown (provided in "page"."element" as a CSS or XPath selector). For example:

# tests/features/my-account.feature

When I select "Green" in "my-page"."dropdownColors"

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    dropdownColors: '#dropdown-colors',
    // OR
    dropdownColorsXPath: '//*[@id="dropdown-colors"]',
    // ...
};

I/user select(s) "..." in ... from ... - select the option (provided in "" as a string) in the dropdown (provided in element from page as a CSS or XPath selector). For example:

# tests/features/my-account.feature

When I select "Green" in dropdownColorsXPath from my-page

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    dropdownColors: '#dropdown-colors',
    // OR
    dropdownColorsXPath: '//*[@id="dropdown-colors"]',
    // ...
};

I/user select(s) "..."."..." in "..."."..." - select the option (provided in "page1"."element1" as a string) in the dropdown (provided in "page2"."element2" as a CSS or XPath selector). For example:

# tests/features/my-account.feature

When I select "my-page"."textGold" in "my-page"."dropdownColors"

// tests/page-objects/my-page.ts

const myPage = {
    textGold: 'Gold',
    // ...
    dropdownColors: '#dropdown-colors',
    // OR
    dropdownColorsXPath: '//*[@id="dropdown-colors"]',
    // ...
};

I/user select(s) ... from ... in ... from ... - select the option (provided in element1 from page1 as a string) in the dropdown (provided in element2 from page2 as a CSS or XPath selector). For example:

# tests/features/my-account.feature

When I select textGold from my-page in dropdownColorsXPath from my-page

// tests/page-objects/my-page.ts

const myPage = {
    textGold: 'Gold',
    // ...
    dropdownColors: '#dropdown-colors',
    // OR
    dropdownColorsXPath: '//*[@id="dropdown-colors"]',
    // ...
};

I/user move(s) to "..."."..." - move the mouse pointer over the element (hover with cursor an element provided in "page"."object" as CSS or XPath selector). For example:

# tests/features/my-account.feature

When I move to "my-page"."linkTest2Page"

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    linkTest2Page: '#link-test2-page',
    // OR
    linkTest2PageXPath: '//*[@id="link-test2-page"]',
    // ...
};

I/user move(s) to ... from ... - move the mouse pointer over the element (hover with cursor an element provided in object from page as CSS or XPath selector). For example:

# tests/features/my-account.feature

When I move to linkTest2PageXPath from my-page

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    linkTest2Page: '#link-test2-page',
    // OR
    linkTest2PageXPath: '//*[@id="link-test2-page"]',
    // ...
};

I/user reload(s) the page - reload the current page. For example:
```
# tests/features/my-account.feature

When I reload the page
```
I/user wait(s) for ... ms - wait for a provided amount of time (in milliseconds). For example:
```
# tests/features/my-account.feature

When I wait for 200 ms
```

Then steps

page title should be "..." - verify that the title of the current browser window/tab equals to the text (provided in "" as a string). For example:
```
# tests/features/my-account.feature

Then page title should be "My test account page"
```
page title should contain "..." - verify that the title of the current browser window/tab contains the text (provided in "" as a string). For example:
```
# tests/features/my-account.feature

Then page title should contain "test account"
```

"..."."..." should be present - verify that the element (provided in "page"."element" as a CSS or XPath selector) is present on the page. For example:

# tests/features/my-account.feature

Then "my-page"."linkTest2Page" should be present

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    linkTest2Page: '#link-test2-page',
    // OR
    linkTest2PageXPath: '//*[@id="link-test2-page"]',
    // ...
};

... from ... should be present - verify that the element (provided in element from page as a CSS or XPath selector) is present on the page. For example:

# tests/features/my-account.feature

Then linkTest2PageXPath from my-page should be present

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    linkTest2Page: '#link-test2-page',
    // OR
    linkTest2PageXPath: '//*[@id="link-test2-page"]',
    // ...
};

... "..."."..." should be present - verify that the number of the elements (provided in "page"."element" as a CSS or XPath selector) are present on the page. For example:

# tests/features/my-account.feature

Then 4 "my-page"."input" should be present

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    input: 'input',
    // OR
    inputXPath: '//input',
    // ...
};

... ... from ... should be present - verify that the number of the elements (provided in element from page as a CSS or XPath selector) are present on the page. For example:

# tests/features/my-account.feature

Then 4 inputXPath from my-page should be present

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    input: 'input',
    // OR
    inputXPath: '//input',
    // ...
};

"..."."..." should not be present - verify that the element (provided in "page"."element" as a CSS or XPath selector) is not present on the page. For example:

# tests/features/my-account.feature

Then "my-page"."linkTest2Page" should not be present

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    linkTest2Page: '#link-test2-page',
    // OR
    linkTest2PageXPath: '//*[@id="link-test2-page"]',
    // ...
};

... from ... should not be present - verify that the element (provided in element from page as a CSS or XPath selector) is not present on the page. For example:

# tests/features/my-account.feature

Then linkTest2PageXPath from my-page should not be present

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    linkTest2Page: '#link-test2-page',
    // OR
    linkTest2PageXPath: '//*[@id="link-test2-page"]',
    // ...
};

"..."."..." text should be "..." - verify that the text of the element (provided in "page"."element" as a CSS or XPath selector) equals to the text (provided in "" as a string). For example:

# tests/features/my-account.feature

Then "my-page"."blockInputColor" text should be "Green"

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    blockInputColor: '#block-input-color',
    // OR
    blockInputColorXPath: '//*[@id="block-input-color"]',
    // ...
};

... from ... text should be "..." - verify that the text of the element (provided in element from page as a CSS or XPath selector) equals to the text (provided in "" as a string). For example:

# tests/features/my-account.feature

Then blockInputColor from my-page text should be "Green"

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    blockInputColor: '#block-input-color',
    // OR
    blockInputColorXPath: '//*[@id="block-input-color"]',
    // ...
};

"..."."..." text should be "..."."..." - verify that the text of the element (provided in "page1"."element1" as a CSS or XPath selector) equals to the text (provided in "page2"."element2" as a string). For example:

# tests/features/my-account.feature

Then "my-page"."blockInputColor" text should be "my-page"."textGold"

// tests/page-objects/my-page.ts

const myPage = {
    textGold: 'Gold',
    // ...
    blockInputColor: '#block-input-color',
    // OR
    blockInputColorXPath: '//*[@id="block-input-color"]',
    // ...
};

... from ... text should be ... from ... - verify that the text of the element (provided in element1 from page1 as a CSS or XPath selector) equals to the text (provided in element2 from page2 as a string). For example:

# tests/features/my-account.feature

Then blockInputColorXPath from my-page text should be textGold from my-page

// tests/page-objects/my-page.ts

const myPage = {
    textGold: 'Gold',
    // ...
    blockInputColor: '#block-input-color',
    // OR
    blockInputColorXPath: '//*[@id="block-input-color"]',
    // ...
};

"..."."..." text should contain "..." - verify that the text of the element (provided in "page"."element" as a CSS or XPath selector) contains the text (provided in "" as a string). For example:

# tests/features/my-account.feature

Then "my-page"."blockMyProfile" text should contain "user profile"

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    blockMyProfile: '#my-profile',
    // OR
    blockMyProfileXPath: '//*[@id="my-profile"]',
    // ...
};

... from ... text should contain "..." - verify that the text of the element (provided in element from page as a CSS or XPath selector) contains the text (provided in "" as a string). For example:

# tests/features/my-account.feature

Then blockMyProfileXPath from my-page text should contain "user profile"

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    blockMyProfile: '#my-profile',
    // OR
    blockMyProfileXPath: '//*[@id="my-profile"]',
    // ...
};

"..."."..." text should contain "..."."..." - verify that the text of the element (provided in "page1"."element1" as a CSS or XPath selector) contains the text (provided in "page2"."element2" as a string). For example:

# tests/features/my-account.feature

Then "my-page"."blockMyProfile" text should contain "my-page"."textUserProfile"

// tests/page-objects/my-page.ts

const myPage = {
    textUserProfile: 'user profile',
    // ...
    blockMyProfile: '#my-profile',
    // OR
    blockMyProfileXPath: '//*[@id="my-profile"]',
    // ...
};

... from ... text should contain ... from ... - verify that the text of the element (provided in element1 from page1 as a CSS or XPath selector) contains the text (provided in element2 from page2 as a string). For example:

# tests/features/my-account.feature

Then blockMyProfileXPath from my-page text should contain textUserProfile from my-page

// tests/page-objects/my-page.ts

const myPage = {
    textUserProfile: 'user profile',
    // ...
    blockMyProfile: '#my-profile',
    // OR
    blockMyProfileXPath: '//*[@id="my-profile"]',
    // ...
};

"..."."..." input should be "..." - verify that the element (provided in "page"."element" as a CSS or XPath selector) has the given input value (provided in "" as a string). For example:

# tests/features/my-account.feature

Then "my-page"."inputColors" input should be "Green"

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    inputColors: '#input-colors',
    // OR
    inputColorsXPath: '//*[@id="input-colors"]',
    // ...
};

... from ... input should be "..." - verify that the element (provided in element from page as a CSS or XPath selector) has the given input value (provided in "" as a string). For example:

# tests/features/my-account.feature

Then inputColorsXPath from my-page input should be "Green"

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    inputColors: '#input-colors',
    // OR
    inputColorsXPath: '//*[@id="input-colors"]',
    // ...
};

"..."."..." input should be "..."."..." - verify that the element (provided in "page1"."element1" as a CSS or XPath selector) has the given input value (provided in "page2"."element2" as a string). For example:

# tests/features/my-account.feature

Then "my-page"."inputColors" input should be "my-page"."textGold"

// tests/page-objects/my-page.ts

const myPage = {
    textGold: 'Gold',
    // ...
    inputColors: '#input-colors',
    // OR
    inputColorsXPath: '//*[@id="input-colors"]',
    // ...
};

... from ... input should be ... from ... - verify that the element (provided in element1 from page1 as a CSS or XPath selector) has the given input value (provided in element2 from page2 as a string). For example:

# tests/features/my-account.feature

Then inputColorsXPath from my-page input should be textGold from my-page

// tests/page-objects/my-page.ts

const myPage = {
    textGold: 'Gold',
    // ...
    inputColors: '#input-colors',
    // OR
    inputColorsXPath: '//*[@id="input-colors"]',
    // ...
};

"..."."..." input should contain "..." - verify that the element (provided in "page"."element" as a CSS or XPath selector) contains the given input value (provided in "" as a string). For example:

# tests/features/my-account.feature

Then "my-page"."inputColors" input should contain "een"

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    inputColors: '#input-colors',
    // OR
    inputColorsXPath: '//*[@id="input-colors"]',
    // ...
};

... from ... input should contain "..." - verify that the element (provided in element from page as a CSS or XPath selector) contains the given input value (provided in "" as a string). For example:

# tests/features/my-account.feature

Then inputColorsXPath from my-page input should contain "een"

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    inputColors: '#input-colors',
    // OR
    inputColorsXPath: '//*[@id="input-colors"]',
    // ...
};

"..."."..." input should contain "..."."..." - verify that the element (provided in "page1"."element1" as a CSS or XPath selector) contains the given input value (provided in "page2"."element2" as a string). For example:

# tests/features/my-account.feature

Then "my-page"."inputColors" input should contain "my-page"."textPartGold"

// tests/page-objects/my-page.ts

const myPage = {
    textPartGold: 'old',
    // ...
    inputColors: '#input-colors',
    // OR
    inputColorsXPath: '//*[@id="input-colors"]',
    // ...
};

... from ... input should contain ... from ... - verify that the element (provided in element1 from page1 as a CSS or XPath selector) contains the given input value (provided in element2 from page2 as a string). For example:

# tests/features/my-account.feature

Then inputColorsXPath from my-page input should contain textPartGold from my-page

// tests/page-objects/my-page.ts

const myPage = {
    textPartGold: 'old',
    // ...
    inputColors: '#input-colors',
    // OR
    inputColorsXPath: '//*[@id="input-colors"]',
    // ...
};

"..."."..." input length should be ... - verify that the element (provided in "page"."element" as a CSS or XPath selector) contains the input of the given length (provided as a number). For example:

# tests/features/my-account.feature

Then "my-page"."inputColors" input length should be 42

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    inputColors: '#input-colors',
    // OR
    inputColorsXPath: '//*[@id="input-colors"]',
    // ...
};

... from ... input length should be ... - verify that the element (provided in element from page as a CSS or XPath selector) contains the input of the given length (provided as a number). For example:

# tests/features/my-account.feature

Then inputColorsXPath from my-page input length should be 42

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    inputColors: '#input-colors',
    // OR
    inputColorsXPath: '//*[@id="input-colors"]',
    // ...
};

page URL should be "..." - verify that the URL of the current page equals to the text (provided in "" as a string). For example:
```
# tests/features/my-account.feature

Then page URL should be "https://github.com/Marketionist"
```

page URL should be "..."."..." - verify that the URL of the current page equals to the text (provided in "page"."element" as a string). For example:

# tests/features/my-account.feature

Then page URL should be "my-page"."urlMyPage"

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    urlMyPage: 'https://github.com/Marketionist',
    // ...
};

page URL should be ... from ... - verify that the URL of the current page equals to the text (provided in element from page as a string). For example:

# tests/features/my-account.feature

Then page URL should be urlMyPage from my-page

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    urlMyPage: 'https://github.com/Marketionist',
    // ...
};

page URL should contain "..." - verify that the URL of the current page contains the text (provided in "" as a string). For example:
```
# tests/features/my-account.feature

Then page URL should contain "Marketionist"
```

page URL should contain "..."."..." - verify that the URL of the current page contains the text (provided in "page"."element" as a string). For example:

# tests/features/my-account.feature

Then page URL should contain "my-page"."username"

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    username: 'Marketionist',
    // ...
};

page URL should contain ... from ... - verify that the URL of the current page contains the text (provided in element from page as a string). For example:

# tests/features/my-account.feature

Then page URL should contain username from my-page

// tests/page-objects/my-page.ts

const myPage = {
    // ...
    username: 'Marketionist',
    // ...
};

response status code should be ... - verify that the response status code equals to a provided number. For example:
```
# tests/features/my-test-api.feature

Then response status code should be 200
```
response body should contain "..." - verify that the response body contains the property (provided in "" as a string with a JSON object inside). For example:
```
# tests/features/my-test-api.feature

Then response body should contain "{\"test1\":1,\"test2\":2}"
```

response body should contain "..."."..." - verify that the response body contains the property (provided in "page"."element" as a JSON object or as a string with a JSON object inside). For example:

# tests/features/my-test-api.feature

Then response body should contain "my-test-api-page"."bodyTestString"

// tests/page-objects/my-test-api-page.ts

const myTestApiPage = {
    // ...
    bodyTestString: '{"items":3,"item1":"nice","item2":true,"item3":[1,2,3]}',
    // OR
    bodyTestJson: { items: 3, item1: 'nice', item2: true, item3: [1, 2, 3,], },
    // ...
};

response body should contain ... from ... - verify that the response body contains the property (provided in element from page as a JSON object or as a string with a JSON object inside). For example:

# tests/features/my-test-api.feature

Then response body should contain bodyTestJson from my-test-api-page

// tests/page-objects/my-test-api-page.ts

const myTestApiPage = {
    // ...
    bodyTestString: '{"items":3,"item1":"nice","item2":true,"item3":[1,2,3]}',
    // OR
    bodyTestJson: { items: 3, item1: 'nice', item2: true, item3: [1, 2, 3,], },
    // ...
};

response headers should contain "..." - verify that the response headers contain the property (provided in "" as a string with a JSON object inside). For example:
```
# tests/features/my-test-api.feature

Then response headers should contain "{\"content-type\":\"application/json\"}"
```

response headers should contain "..."."..." - verify that the response headers contain the property (provided in "page"."element" as a JSON object or as a string with a JSON object inside). For example:

# tests/features/my-test-api.feature

Then response headers should contain "my-test-api-page"."headersTestString"

// tests/page-objects/my-test-api-page.ts

const myTestApiPage = {
    // ...
    headersTestString: '{"content-type":"application/json"}',
    // OR
    headersTestJson: { 'content-type': 'application/json', },
    // ...
};

response headers should contain ... from ... - verify that the response headers contain the property (provided in element from page as a JSON object or as a string with a JSON object inside). For example:

# tests/features/my-test-api.feature

Then response headers should contain headersTestJson from my-test-api-page

// tests/page-objects/my-test-api-page.ts

const myTestApiPage = {
    // ...
    headersTestString: '{"content-type":"application/json"}',
    // OR
    headersTestJson: { 'content-type': 'application/json', },
    // ...
};

Requirements

Installation

Note: this package is lightweight and has only 2 peerDependencies - it uses:
@playwright/test to execute steps.
playwright-bdd to parse step definitions.

If you do not have package.json in the root folder of your project you will need to create it:

npm init --init-type=module --yes

To install the playwright-cucumber-steps package and its peerDependencies and to save it to your package.json just run:

npm install @playwright/[email protected] --save-exact --save-dev && npm install playwright-bdd playwright-cucumber-steps --save-dev

Specify the pathes to all step definitions inside the array in the steps property of the playwright.config.ts configuration file in the root directory of your project:

import { defineConfig, devices } from '@playwright/test';
import { defineBddConfig } from 'playwright-bdd';

const testDir = defineBddConfig({
    features: 'tests/features/*.feature',
    steps: [
        'node_modules/playwright-cucumber-steps/dist/index.js',
        'node_modules/playwright-cucumber-steps/dist/fixtures.js',
        'tests/**/*.ts'
    ],
});

export default defineConfig({
    // Look for test files in the directory, relative to this configuration file
    testDir,
    timeout: 30000,
    workers: 8,
    fullyParallel: true,
    retries: 0,
    reporter: [['html', { open: 'never' }]],
    use: {
        ...devices['Desktop Chrome'],
        channel: 'chrome',
        headless: true,
        viewport: { width: 1920, height: 1080, },
        ignoreHTTPSErrors: true,
        trace: 'on',
        screenshot: 'on',
        video: 'on-first-retry',
    },
});

Launch the tests with:

npx bddgen && npx playwright test

OR if you use custom Page Objects folder (not tests/page-objects):

PO_FOLDER_PATH="tests/my-custom-page-objects" npx bddgen && PO_FOLDER_PATH="tests/my-custom-page-objects" npx playwright test

You can import Given, When, Then into your custom Cucumber step definitions file like this:

import { Given, When, Then } from 'playwright-cucumber-steps';

Also you can access Page Objects like this:

import { pageObjects } from 'playwright-cucumber-steps';

Contributing

Please feel free to contribute to this repository - see CONTRIBUTING.md to help you get started. It is not set in stone, so you can just create a pull request and we will help you refine it along the way.

Thanks

If this package was helpful to you - please give this repository a ★ Star on GitHub.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

playwright-cucumber-steps

List of predefined steps

Given steps

When steps

Then steps

Requirements

Installation

Contributing

Thanks