Serenity JS and Playwright record code generation debug

[AbhineetSharmax]

Hi @jan-molak, i hope you remember me from the times of Protractor Serenity JS initial days. I moved to another test framework for time being and could not look into the Serenity JS project. Now, again i got time to work and understand more into Playwright and i suggested my organization to move forward with Serenity JS reports and Screenplay pattern using Serenity JS. I am really happy to work again with Serenity JS and especially with your guidance.

I am currently starting with Playwright project. I have few questions here which are bothering me alot.

1. I saw playwright - cucumber - serenity JS boilerplate projects to start with would they support playwright record and debug features?
2. Would i be able to use test gen with serenityjs cucumber playwright ?
3. When i started with boilerplate, i could not see tests in visual studio plugin for playwright do i need additional extensions?
   Please advise me to start with, i am looking forward to hear from you.

Thank you,
Abhineet Sharma

[jan-molak]

Hi @AbhineetSharmax, it's good to hear from you again!

I understand your challenge. While Playwright can be integrated with Cucumber, it does not offer native support. This means that features like Playwright recorder, UI mode, trace viewer, selector debugging, VS Code tools and so on are only available when using Playwright with its dedicated test runner - Playwright Test.

There's a long thread at microsoft/playwright#11975 where the Playwright community discusses their need for Playwright to provide native support for Cucumber (and where I've also expressed my views), but the Playwright Team has not taken any definitive stance on the matter yet.

Now, it might seem that your choice is binary - either use Serenity/JS with Playwright Test and take advantage of the additional tooling it offers, or use Serenity/JS with Cucumber and give up the additional tools to gain the natural language/Gherkin layer.

I think it's much more nuanced than that, so here are some thoughts you might want to consider.

Do you need Cucumber?

As you know, Cucumber is a collaboration tool, not an automation tool. This means that it can work really well when your team follows Behaviour-Driven Development and you have actively engaged customers/sponsors who are comfortable reviewing or contributing to feature files. It's also a great collaboration medium if the audience of your acceptance tests does not feel comfortable reading specifications written in English and you need a translation layer to another language, like French, Japanese, and so on. You might also have other tools or systems that integrate well with Cucumber-based test scenarios.

If some or most of those points describe your situation, then Cucumber might be the right choice for you.

Is Playwright Test enough?

However, if what you're after are human-readable reports and you don't need the additional collaboration layer offered by Cucumber, you might be better off using Playwright Test and investing in designing a test DSL using Serenity/JS Screenplay Pattern APIs.

While Playwright Test code generator is not yet extensible, I'm considering writing a Chrome plugin that could allow you to generate Serenity/JS Screenplay scenarios (which, in all fairness, you could then paste into your Cucumber step definitions, too...).

You can already use Playwright Test debugging features with Serenity/JS, as you can see in the web testing tutorial.

Do you need to make a choice?

The great thing about the Serenity/JS web façade is that it gives you the option to change your test runner at a later date when you know more about your team, stakeholders, and their requirements.

In fact, you can even use both Playwright Test and Cucumber at the same time! I use this approach with one of the teams I'm working with, where we use Serenity/JS with Playwright Component Testing features to write Screenplay scenarios around UI widgets, Serenity/JS with Playwright Test E2E to write UI-based smoke tests and REST API tests, and then we reuse the custom Serenity/JS Screenplay tasks we used with Playwright Test in Cucumber scenarios written for the business stakeholders and auditors.

This way, a custom Serenity/JS library of Screenplay tasks decouples your test automation layer from your scenario definition layer.

Hope this helps!

[AbhineetSharmax]

Thank you @jan-molak , for all the information and efforts. This is really helpful. I would look forward to read latest docs. and come with more queries :)

Keep doing the great work. Serenity JS is amazing!!