Add e2e tests with Playwright

[eth3lbert]

This PR starts porting the current test suit that includes visits to Playwright. Additionally, the tests will be implemented in Typescript.

Steps to try locally:

# Install Chromium for Playwright
pnpm exec playwright install chromium

# Run e2e tests with Playwright
pnpm e2e

Items for follow-up PRs:

• Skipping QUnit tests implemented in Playwright
• Coverage
• QUnit tests integration with Playwright (?)
  • Ref: https://github.com/lifeart/demo-ember-vite/blob/master/e2e/flows/qunit.spec.ts
• Adding e2e tests to CI workflow

---

For those who are familiar with QUnit but haven't used Playwright before, you may want to skim through intro, especially the writing-tests and running-and-debugging sections. Playwright offers some test and debug functionalities similar to QUnit:

• --debug flag: Similar to development mode.
• --ui flag: Similar to the QUnit tests route.

There is also an getting-started-vscode if you use it as your editor.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 88.48%. Comparing base (c8a0c8a) to head (9f29ace).
Report is 1 commits behind head on main.

❗ Current head 9f29ace differs from pull request most recent head dcdfb87

Please upload reports for the commit dcdfb87 to get more accurate results.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8521      +/-   ##
==========================================
- Coverage   88.48%   88.48%   -0.01%     
==========================================
  Files         276      276              
  Lines       27433    27433              
==========================================
- Hits        24274    24273       -1     
- Misses       3159     3160       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[eth3lbert]

A script like the following, which leverages delta, could be helpful for reviewing the changes. This script would compare the new implementation to the old one.

import sys
from subprocess import PIPE, run


def get_changed_files():
    cmd = "git diff --name-only -r HEAD^ main"
    output = run(cmd, stdout=PIPE, stderr=PIPE, shell=True, universal_newlines=True)
    files = output.stdout
    return files


for new in get_changed_files().splitlines():
    if not new.endswith(".spec.ts"):
        continue
    old = new.replace("e2e", "tests").replace(".spec.ts", "-test.js")
    cmd = f"diff -u --ignore-space-change {old} {new} | delta"
    output = run(cmd, stdout=PIPE, stderr=PIPE, shell=True, universal_newlines=True)
    print(output.stdout)
    sys.stdin.read(1)

[Turbo87]

due to the size of the diff and my upcoming PTO I probably won't be able to review the PR this week, but I've put it on my todo list for next week :)

[eth3lbert]

Thanks! This PR definitely took some time to review, so I appreciate it.

[Turbo87]

LGTM!

Given the size of the diff, I won't pretend to have reviewed every single test in this PR, but the approach in general looks good to me.

I rebased the branch on top of main to get rid of the merge conflict, and I fixed a CSS selector typo in the 404 test, which I noticed in the second commit.

One thing to consider: we might want to add an e2e/README.md explaining the purpose of the folder and that this is still WIP. I guess the next step then would be CI integration?

[eth3lbert]

Thanks for the review! I'll integrate this change into our CI in a follow-up PR.

---

After this PR is merged, should we skip the overlapping Ember tests that have already been rewritten in Playwright?

[bors]

☔ The latest upstream changes (presumably 1a6567d) made this pull request unmergeable. Please resolve the merge conflicts.

[Turbo87]

After this PR is merged, should we skip the overlapping Ember tests that have already been rewritten in Playwright?

I think it's best to keep them running in parallel for now until we're confident about the new test setup