playwright-cucumber-steps

v1.10.0

Published

2 months 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 enter(s) "..." into "..."."..." - enter 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 enter "Green" into "my-page"."inputColors"

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

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

Note: enter steps use Playwright's fill method (faster than type steps, but does not trigger per-key events). It acts as if the text was pasted into the field all at once, firing only an input and a change event at the end of the operation.

I/user enter(s) "..." into ... from ... - enter 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 enter "Green" into inputColorsXPath from my-page

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

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

I/user enter(s) "..."."..." into "..."."..." - enter 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 enter "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 enter(s) ... from ... into ... from ... - enter 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 enter 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 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"]',
    // ...
};

Note: type steps use Playwright's pressSequentially method (slower than enter steps, but triggers per-key events like keydown, keypress/input, and keyup for each character in the text). In most cases, you should use enter steps instead. You only need to press keys one by one if there is special keyboard handling on the page.

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 resize(s) the page to ...x... px - resize the viewport to the given width and height (in pixels). For example:
```
# tests/features/my-account.feature

When I resize the page to 1280x720 px
```
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
```
I/user press(es) "..." - press a key (provided in "" as a string) on the keyboard. For example:
```
# tests/features/my-account.feature

When I press "Enter"
```

Note: see the list of supported keys and key combinations.

I/user press(es) "..." in "..."."..." - press a key (provided in "" as a string) in the element (provided in "page"."element" as a CSS or XPath selector). For example:

# tests/features/my-account.feature

When I press "Enter" in "my-page"."inputColors"

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

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

I/user press(es) "..." in ... from ... - press a key (provided in "" as a string) in the element (provided in element from page as a CSS or XPath selector). For example:

# tests/features/my-account.feature

When I press "Enter" in inputColorsXPath from my-page

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

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

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

# tests/features/my-account.feature

When I focus "my-page"."inputColors"

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

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

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

# tests/features/my-account.feature

When I focus inputColorsXPath from my-page

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

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

I/user listen(s) for "..." event on "..."."..." - start listening for a custom DOM event (provided in "" as a string) on the element (provided in "page"."element" as a CSS or XPath selector). Use together with event should have been emitted, event detail should have property, and event detail "..." should be "..." steps to verify events after triggering an action. For example:
```
# tests/features/my-account.feature

When I listen for "my-custom-event" event on "my-page"."buttonEmitEvent"
```
```
// tests/page-objects/my-page.ts

const myPage = {
    // ...
    buttonEmitEvent: '#button-emit-event',
    // OR
    buttonEmitEventXPath: '//*[@id="button-emit-event"]',
    // ...
};
```

I/user listen(s) for "..." event on ... from ... - start listening for a custom DOM event (provided in "" as a string) on the element (provided in element from page as a CSS or XPath selector). For example:

# tests/features/my-account.feature

When I listen for "my-custom-event" event on buttonEmitEventXPath from my-page

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

const myPage = {
    // ...
    buttonEmitEvent: '#button-emit-event',
    // OR
    buttonEmitEventXPath: '//*[@id="button-emit-event"]',
    // ...
};

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 "Test1 Page"
```

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

# tests/features/my-account.feature

Then page title should be "my-page"."textTest1Page"

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

const myPage = {
    // ...
    textTest1Page: 'Test1 Page',
    // ...
};

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

# tests/features/my-account.feature

Then page title should be textTest1Page from my-page

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

const myPage = {
    // ...
    textTest1Page: 'Test1 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 "st1 Pa"
```

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

# tests/features/my-account.feature

Then page title should contain "my-page"."textTest1PagePartial"

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

const myPage = {
    // ...
    textTest1PagePartial: 'st1 Pa',
    // ...
};

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

# tests/features/my-account.feature

Then page title should contain textTest1PagePartial from my-page

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

const myPage = {
    // ...
    textTest1PagePartial: 'st1 Pa',
    // ...
};

"..."."..." 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"]',
    // ...
};

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

# tests/features/my-account.feature

Then "my-page"."inputColors" should be focused

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

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

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

# tests/features/my-account.feature

Then inputColorsXPath from my-page should be focused

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

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

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

# tests/features/my-account.feature

Then "my-page"."inputDisabled" should be disabled

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

const myPage = {
    // ...
    inputDisabled: '#input-disabled',
    // OR
    inputDisabledXPath: '//*[@id="input-disabled"]',
    // ...
};

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

# tests/features/my-account.feature

Then inputDisabledXPath from my-page should be disabled

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

const myPage = {
    // ...
    inputDisabled: '#input-disabled',
    // OR
    inputDisabledXPath: '//*[@id="input-disabled"]',
    // ...
};

"..."."..." 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',
    // ...
};

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

# tests/features/my-account.feature

Then "my-page"."linkTest2Page" attribute "href" should be "http://localhost:8001/test2.html"

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

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

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

# tests/features/my-account.feature

Then linkTest2PageXPath from my-page attribute "href" should be "http://localhost:8001/test2.html"

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

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

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

# tests/features/my-account.feature

Then "my-page"."linkTest2Page" attribute "href" should be "my-page"."urlTest2"

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

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

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

# tests/features/my-account.feature

Then linkTest2PageXPath from my-page attribute "href" should be urlTest2 from my-page

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

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

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

# tests/features/my-account.feature

Then "my-page"."linkTest2Page" attribute "href" should contain "test2.html"

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

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

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

# tests/features/my-account.feature

Then linkTest2PageXPath from my-page attribute "href" should contain "test2.html"

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

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

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

# tests/features/my-account.feature

Then "my-page"."linkTest2Page" attribute "href" should contain "my-page"."urlTest2"

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

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

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

# tests/features/my-account.feature

Then linkTest2PageXPath from my-page attribute "href" should contain urlTest2 from my-page

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

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

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

# tests/features/my-account.feature

Then "my-page"."linkTest2Page" attribute "href" should not contain "test3.html"

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

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

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

# tests/features/my-account.feature

Then linkTest2PageXPath from my-page attribute "href" should not contain "test3.html"

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

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

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

# tests/features/my-account.feature

Then "my-page"."linkTest2Page" attribute "href" should not contain "my-page"."urlTest3"

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

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

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

# tests/features/my-account.feature

Then linkTest2PageXPath from my-page attribute "href" should not contain urlTest3 from my-page

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

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

"..."."..." CSS property "..." should be "..." - verify that the element (provided in "page"."element" as a CSS or XPath selector) has exactly the given CSS property value (property provided in "" as a string, value provided in "" as a string). For example:
```
# tests/features/my-account.feature

Then "my-page"."titleTest1" CSS property "display" should be "block"
```
```
// tests/page-objects/my-page.ts

const myPage = {
    // ...
    titleTest1: 'h1',
    // OR
    titleTest1XPath: '//h1',
    // ...
};
```

... from ... CSS property "..." should be "..." - verify that the element (provided in element from page as a CSS or XPath selector) has exactly the given CSS property value (property provided in "" as a string, value provided in "" as a string). For example:
```
# tests/features/my-account.feature

Then titleTest1 from my-page CSS property "display" should be "block"
```
```
// tests/page-objects/my-page.ts

const myPage = {
    // ...
    titleTest1: 'h1',
    // OR
    titleTest1XPath: '//h1',
    // ...
};
```

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

# tests/features/my-account.feature

Then "my-page"."titleTest1" CSS property "display" should be "my-page"."cssValueBlock"

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

const myPage = {
    cssValueBlock: 'block',
    // ...
    titleTest1: 'h1',
    // OR
    titleTest1XPath: '//h1',
    // ...
};

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

# tests/features/my-account.feature

Then titleTest1 from my-page CSS property "display" should be cssValueBlock from my-page

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

const myPage = {
    cssValueBlock: 'block',
    // ...
    titleTest1: 'h1',
    // OR
    titleTest1XPath: '//h1',
    // ...
};

"..."."..." CSS property "..." should contain "..." - verify that the element (provided in "page"."element" as a CSS or XPath selector) has the given CSS property value (property provided in "" as a string, value provided in "" as a string). For example:
```
# tests/features/my-account.feature

Then "my-page"."titleTest1" CSS property "display" should contain "block"
```
```
// tests/page-objects/my-page.ts

const myPage = {
    // ...
    titleTest1: 'h1',
    // OR
    titleTest1XPath: '//h1',
    // ...
};
```

... from ... CSS property "..." should contain "..." - verify that the element (provided in element from page as a CSS or XPath selector) has the given CSS property value (property provided in "" as a string, value provided in "" as a string). For example:
```
# tests/features/my-account.feature

Then titleTest1 from my-page CSS property "display" should contain "block"
```
```
// tests/page-objects/my-page.ts

const myPa
```

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

playwright-cucumber-steps

List of predefined steps

Given steps

When steps

Then steps