CodeceptJS / Playwright helper question

CodeceptJS
1

So we have a playwright test repo, and we’ve been tasked with making it easier for non-developers to write tests. We’re taking a look at CodeceptJS, and have a couple questions:

  1. With elements/locators, when we tell playwright to click/find/etc), we can see in the debug mode all of the actions playwright is taking (looking for element, scrolling into view, making sure it’s enabled, making sure it’s visible). Is that happening when using CodeceptJS with playwright as a helper? If so, how do I see that? Using just playwright test runner, I can use --debug mode and actually see and log what is happening, Is there a similar debug mode for Codecept that will provide the same information and visibility?

  2. Playwright has the ability to run tests based on ‘tags’ in the command line ('npx playwright test -g tag1), and so we have hundreds of tests, but are able to run subsets of them based on the tags. I don’t see or was unable to find a simple way to do this with Codecept. I’d expect if Codecept is using Playwright as a helper, I should be able take advantage of all of the capabilities of Playwright when running the codecept tests. Is that possible?

Thanks for any help

dan

2

1. Debugging in CodeceptJS with Playwright Helper

When using CodeceptJS with Playwright as a helper, the debugging experience is a bit different from using Playwright directly. CodeceptJS doesn’t have a direct equivalent to Playwright’s --debug mode, but it does offer several ways to get similar visibility into what’s happening during test execution:

  • Verbose Mode: CodeceptJS allows you to run tests in verbose mode, which provides detailed logs about each action being performed, similar to what you see in Playwright’s --debug mode.

    • You can enable verbose mode by running your tests with the --verbose flag:
      npx codeceptjs run --verbose
    • This will print detailed information to the console about the steps being taken, including element searching, interactions, and assertions.

  • Pause Execution: You can also pause execution at any point during the test using the pause() method. This allows you to interact with the browser manually.

    • Example:
      I.click('Submit');
pause();

  • Headless Mode Off: Sometimes, it’s helpful to see what’s happening by disabling headless mode. You can do this by configuring the Playwright helper in codecept.conf.js:

    Playwright: {
  url: 'http://localhost',
  show: true, // this disables headless mode
  browser: 'chromium'
}

While these methods provide insight into what CodeceptJS is doing, they do not offer the same step-by-step breakdown as Playwright’s --debug mode, but they are the best available options within the framework.

2. Running Tagged Tests in CodeceptJS

In Playwright, you can use the -g option to run tests based on tags. CodeceptJS also supports running tests by tags, though it uses a different approach. Here’s how you can achieve this:

  • Using Tags in CodeceptJS: CodeceptJS supports tagging test scenarios, and you can run tests with specific tags using the --grep or --grepInvert option.

    • To tag a test, you use the @ symbol:
      Feature('My Feature');

Scenario('Test with tag1', ({ I }) => {
  // test code
});

Scenario('Test with tag2', ({ I }) => {
  // test code
});
    • To run tests with a specific tag:
      npx codeceptjs run --grep @tag1
    • You can also combine multiple tags with a regular expression:
      npx codeceptjs run --grep '@tag1|@tag2'
    • To exclude tests with certain tags, use --grepInvert:
      npx codeceptjs run --grepInvert @tag1

  • Configuring Tests for Tagging: You need to ensure that your tests are properly tagged for this functionality to work. This way, you can run subsets of tests based on your needs, similar to how you do with Playwright’s native test runner.

Note: While CodeceptJS does not offer a direct integration for all Playwright features, you can often achieve similar outcomes by leveraging CodeceptJS’s built-in capabilities and configuring the Playwright helper appropriately.

Hope this answered your concerned