Question:Re useable of step defination method

[prasadroks]

Is there any way where we can use the already defined step defination method in any other step defination, like the same way we can do in cucumber java bdd framework.

cucumber java bdd example:

There are 2 different steps but I am able to use that step defination in another step defination.
Can i achieve this in playwright-bdd, without creating any seperate function.

[gitToSantosh]

You can save the entire step into a const and export it and then call the const into the step where you want to re-use

const GO_TO_PLAYWRIGHT_HOME = Given( 'I am on Playwright home page', async ( { commonPage } ) => {
	await commonPage.navigateToUrl( 'https://playwright.dev' );
} );

When( 'I click link {string}', async ( { commonPage }, linkname: string ) => {
	await GO_TO_PLAYWRIGHT_HOME( { commonPage } );
	await commonPage.clickOnLink( linkname );
} );

[prasadroks]

You can save the entire step into a const and export it and then call the const into the step where you want to re-use

const GO_TO_PLAYWRIGHT_HOME = Given( 'I am on Playwright home page', async ( { commonPage } ) => {
	await commonPage.navigateToUrl( 'https://playwright.dev' );
} );

When( 'I click link {string}', async ( { commonPage }, linkname: string ) => {
	await GO_TO_PLAYWRIGHT_HOME( { commonPage } );
	await commonPage.clickOnLink( linkname );
} );

You can save the entire step into a const and export it and then call the const into the step where you want to re-use

const GO_TO_PLAYWRIGHT_HOME = Given( 'I am on Playwright home page', async ( { commonPage } ) => {
	await commonPage.navigateToUrl( 'https://playwright.dev' );
} );

When( 'I click link {string}', async ( { commonPage }, linkname: string ) => {
	await GO_TO_PLAYWRIGHT_HOME( { commonPage } );
	await commonPage.clickOnLink( linkname );
} );

test

You can save the entire step into a const and export it and then call the const into the step where you want to re-use

const GO_TO_PLAYWRIGHT_HOME = Given( 'I am on Playwright home page', async ( { commonPage } ) => {
	await commonPage.navigateToUrl( 'https://playwright.dev' );
} );

When( 'I click link {string}', async ( { commonPage }, linkname: string ) => {
	await GO_TO_PLAYWRIGHT_HOME( { commonPage } );
	await commonPage.clickOnLink( linkname );
} );

30 Oct 2024
But here you have created a method in the commonPage, which was not my question, i am aware of this condition and also if i have to use that method the straight forward way would be directly calling it.

Assume I have some steps defined in
Given( 'Open {string} in browser', async ( { page }, url:string ) => {
await page.goto(url);
await page.perform_display_page_name();
} );

I have another method which would be doing the same
Given( 'navigate to {string}', async ( { page }, url:string ) => {
Here i want to use the same steps that have been given in above methods, so instead of rewriting the same again i want to make of reusability just by calling that method and passing url as an argument
} );

[gitToSantosh]

You can save the entire step into a const and export it and then call the const into the step where you want to re-use

const GO_TO_PLAYWRIGHT_HOME = Given( 'I am on Playwright home page', async ( { commonPage } ) => {
	await commonPage.navigateToUrl( 'https://playwright.dev' );
} );

When( 'I click link {string}', async ( { commonPage }, linkname: string ) => {
	await GO_TO_PLAYWRIGHT_HOME( { commonPage } );
	await commonPage.clickOnLink( linkname );
} );

You can save the entire step into a const and export it and then call the const into the step where you want to re-use

const GO_TO_PLAYWRIGHT_HOME = Given( 'I am on Playwright home page', async ( { commonPage } ) => {
	await commonPage.navigateToUrl( 'https://playwright.dev' );
} );

When( 'I click link {string}', async ( { commonPage }, linkname: string ) => {
	await GO_TO_PLAYWRIGHT_HOME( { commonPage } );
	await commonPage.clickOnLink( linkname );
} );

test

You can save the entire step into a const and export it and then call the const into the step where you want to re-use

const GO_TO_PLAYWRIGHT_HOME = Given( 'I am on Playwright home page', async ( { commonPage } ) => {
	await commonPage.navigateToUrl( 'https://playwright.dev' );
} );

When( 'I click link {string}', async ( { commonPage }, linkname: string ) => {
	await GO_TO_PLAYWRIGHT_HOME( { commonPage } );
	await commonPage.clickOnLink( linkname );
} );

30 Oct 2024 But here you have created a method in the commonPage, which was not my question, i am aware of this condition and also if i have to use that method the straight forward way would be directly calling it.

Assume I have some steps defined in Given( 'Open {string} in browser', async ( { page }, url:string ) => { await page.goto(url); await page.perform_display_page_name(); } );

I have another method which would be doing the same Given( 'navigate to {string}', async ( { page }, url:string ) => { Here i want to use the same steps that have been given in above methods, so instead of rewriting the same again i want to make of reusability just by calling that method and passing url as an argument } );

GO_TO_PLAYWRIGHT_HOME is NOT a method in commonPage. Your Steps would look like this:

export const OPEN_URL = Given( 'Open {string} in browser', async ( { page }, url:string ) => {
await page.goto(url);
await page.perform_display_page_name();
} );

\\ I have another method which would be doing the same
Given( 'navigate to {string}', async ( { page }, url:string ) => {
\\Here i want to use the same steps that have been given in above methods, so instead of rewriting the same again i want to \\make of reusability just by calling that method and passing url as an argument
\\ call the const, pass the fixtures first then the remaining args
await OPEN_URL({page}, url);
} );