Starchart: Playwright tests separation

The past week, I continued working on different issues in starchart. This involved adding a deactivated flag to users, which was a fairly simple change. This is required as we want to allow admin users to delete users. However, before a user can be deleted, we need to queue up deletion of any DNS records or certificates associated with that user.
This process can take some time, and we needed a way to prevent the user from creating any new DNS records or certificates while they are being deleted. Thus, we decided to add a deactivated flag to users and if this flag is true, they will not be able to perform any actions.

Another issue I worked on was to improve our documentation about Playwright, and more specifically, our configuration and how to use the automated report we generate after a CI run to debug any failing tests (wiki page).
While working on this documentation, I also worked with Ririio with his work on improving our e2e test coverage for various pages. We ran into an issue while testing the header as the links in the header move into a hamburger menu on mobile viewports:

• Desktop View:

• Mobile View:

Thus, as our playwright config ran the same test file for several browsers, including mobile view ports we would either have failing tests for desktop or failing tests for mobile.

An option was to skip tests if we were on a mobile viewport. However, due to an issue with mobile safari configuration, where it fails on GitHub Actions but passes on Windows (where I was able to test), we had to override the configuration's isMobile property to false as a workaround. So, this would not work. Even then, we would need to add a test.skip to every test we wanted to skip for mobile, and then add another test to only run on mobile.

After some discussion, we decided to use the testIgnore property in the configuration:

projects: [
  ...
  // Desktop projects
  {
    ...
    testIgnore: /.*\.mobile\.spec\.ts/,
  },
  ...
  // Mobile projects
  {
    ...
    testIgnore: /.*\.desktop\.spec\.ts/,
  }

We added mobile specific tests in files ending with .mobile.spec.ts (eg: header.mobile.spec.ts), and desktop specific tests in files ending with .desktop.spec.ts (eg: header.desktop.spec.ts). Any common tests would still go in the usual file (eg: header.spec.ts).
This works as playwright has a testMatch property which by default matches all files using the regex .*(test|spec)\.(js|ts|mjs).