Cucumber steps (step definitions) written with Playwright for end-to-end (e2e) tests
Note: see all steps usage examples in:
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;
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": "testuser@example.com", "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": "testuser@example.com", "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": "testuser@example.com", "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": "testuser@example.com", "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": "testuser@example.com", "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": "testuser@example.com", "active": true } } """
// tests/page-objects/my-test-api-page.ts const myTestApiPage = { // ... urlTestRequest: 'http://httpbin.org/post', // ... };
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
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', }, // ... };
| Node.js | Playwright | Playwright-BDD |
|---|---|---|
| >=22.3.x | >=1.57.0 | >=8.4.2 |
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.jsonin 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.jsonjust run:
npm install @playwright/test@1.57.0 --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
stepsproperty of theplaywright.config.tsconfiguration 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 testOR 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 testYou 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';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.
If this package was helpful to you - please give this repository a ★ Star on GitHub.
