Use page object pattern for e2e tests

[cquinn540]

Contributor checklist

• This pull request is on a separate branch and not the main branch
• I have run the tests for the backend and frontend depending on what's needed for my changes as described in the testing section of the contributing guide

---

Description

This change adds tests for the landing, home, and sign-in pages, and it updates the playwright tests to use the page object patternbased on the work of @aasimsyed

I also changed the test directory from tests to test-e2e to better differentiate it from our component tests, as well as some various bug fixes.

Related issue

• Starting with testing #432

[netlify]

✅ Deploy Preview for activist-org ready!

Name	Link
🔨 Latest commit	133a1cd
🔍 Latest deploy log	https://app.netlify.com/sites/activist-org/deploys/6755e49f13689c0008aba909
😎 Deploy Preview	https://deploy-preview-1041--activist-org.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

Thank you for the pull request!

The activist team will do our best to address your contribution as soon as we can. The following is a checklist for maintainers to make sure this process goes as well as possible. Feel free to address the points below yourself in further commits if you realize that actions are needed :)

If you're not already a member of our public Matrix community, please consider joining! We'd suggest using Element as your Matrix client, and definitely join the General and Development rooms once you're in. Also consider joining our bi-weekly Saturday dev syncs. It'd be great to have you!

Maintainer checklist

• The TypeScript and formatting workflows within the PR checks do not indicate new errors in the files changed

• The Playwright end to end and Zap penetration tests have been ran and are passing (if necessary)

• The changelog has been updated with a description of the changes for the upcoming release and the corresponding issue (if necessary)

[cquinn540]

Great I'm running into the $t not defined issue now

[mattburnett-repo]

Hi Colin,

Looking at the log for the PR Frontend Checks, I see only the following errors:

Error: test-e2e/component-objects/EventMenu.ts(68,18): error TS2571: Object is of type 'unknown'.
Error: test-e2e/component-objects/EventMenu.ts(75,19): error TS2571: Object is of type 'unknown'.
Error:  Command failed with exit code 2: /home/runner/work/activist/activist/frontend/node_modules/vue-tsc/bin/vue-tsc.js --noEmit

While it's never a fun time to hit a snag like this, it looks like this is a relatively straight-forward typing error involving EventMenu.ts, in one of the e2e tests. The $t issue is / was something else, and it doesn't look like it appears in the Frontend Checks log.

Could you please reply here and let me know if you're running into $t errors? Specifically, it would be helpful to know where you are finding them.

Also, please keep in mind that the $t issue doesn't look like it has any negative functional or performative effects, meaning that it doesn't appear to have any real-time, production-related effects on the app. I've been pursuing it simply because I make a point of chasing down these sorts of oddball system messages. That means, don't stress on the $t thing too much :)

Thanks for all of the great work!

[andrewtavis]

This is really great that we've found a workable solution here, @cquinn540! Do we want to document this somewhere in the contributing guide? :)

[cquinn540]

I can document how to run it, but I think it needs to be refactored before adding a guide on how to contribute to the e2e tests.

[cquinn540]

Or if you mean the $t type issue yeah that should be documented in the contributing guide but I think that should be a different PR attached to the issue raised for it. This PR is big enough as it is.

[mattburnett-repo]

@cquinn540 FWIW, I tried the five steps you mentioned above, and still get the $t issue.

Re-enabling the vue-i18n.d.ts file makes the $t issue go away.

Please let me know when you find an explanation / solution for this. Very curious to see how this can be resolved.

[andrewtavis]

I'll put the directions for the i18n file back in the contributing guide :)

[andrewtavis]

Ok so post a yarn outage we're passing in frontend, but still failing in e2e. Here are the failed tests:

    [chromium] › home-page.spec.ts:74:7 › Home Page › Home Page has no detectable accessibility issues 
    [chromium] › landing-page.spec.ts:118:7 › Landing Page › Landing Page has no detectable accessibility issues 
    [chromium] › sign-in-page.spec.ts:100:7 › Sign In Page › should show error for invalid credentials 
    [chromium] › sign-in-page.spec.ts:111:7 › Sign In Page › Sign In Page has no detectable accessibility issues 
    [webkit] › home-page.spec.ts:74:7 › Home Page › Home Page has no detectable accessibility issues 
    [webkit] › landing-page.spec.ts:118:7 › Landing Page › Landing Page has no detectable accessibility issues 
    [webkit] › sign-in-page.spec.ts:100:7 › Sign In Page › should show error for invalid credentials 
    [webkit] › sign-in-page.spec.ts:111:7 › Sign In Page › Sign In Page has no detectable accessibility issues 
    [Mobile Chrome] › home-page.spec.ts:74:7 › Home Page › Home Page has no detectable accessibility issues 
    [Mobile Chrome] › sign-in-page.spec.ts:100:7 › Sign In Page › should show error for invalid credentials 
    [Mobile Chrome] › sign-in-page.spec.ts:111:7 › Sign In Page › Sign In Page has no detectable accessibility issues 
    [Mobile Safari] › home-page.spec.ts:31:7 › Home Page › Navigation links should be functional ───
    [Mobile Safari] › home-page.spec.ts:74:7 › Home Page › Home Page has no detectable accessibility issues 
    [Mobile Safari] › sign-in-page.spec.ts:100:7 › Sign In Page › should show error for invalid credentials 
    [Mobile Safari] › sign-in-page.spec.ts:111:7 › Sign In Page › Sign In Page has no detectable accessibility issues 
    [Mobile Samsung] › home-page.spec.ts:74:7 › Home Page › Home Page has no detectable accessibility issues 
    [Mobile Samsung] › sign-in-page.spec.ts:100:7 › Sign In Page › should show error for invalid credentials 
    [Mobile Samsung] › sign-in-page.spec.ts:111:7 › Sign In Page › Sign In Page has no detectable accessibility issues 
    [Mobile iPad Portrait] › home-page.spec.ts:74:7 › Home Page › Home Page has no detectable accessibility issues 
    [Mobile iPad Portrait] › landing-page.spec.ts:118:7 › Landing Page › Landing Page has no detectable accessibility issues 
    [Mobile iPad Portrait] › sign-in-page.spec.ts:100:7 › Sign In Page › should show error for invalid credentials 
    [Mobile iPad Portrait] › sign-in-page.spec.ts:111:7 › Sign In Page › Sign In Page has no detectable accessibility issues 
    [Mobile iPad Landscape] › home-page.spec.ts:74:7 › Home Page › Home Page has no detectable accessibility issues 
    [Mobile iPad Landscape] › landing-page.spec.ts:118:7 › Landing Page › Landing Page has no detectable accessibility issues 
    [Mobile iPad Landscape] › sign-in-page.spec.ts:100:7 › Sign In Page › should show error for invalid credentials 
    [Mobile iPad Landscape] › sign-in-page.spec.ts:111:7 › Sign In Page › Sign In Page has no detectable accessibility issues 

We can look into these in the future :)

[andrewtavis]

Thanks so much for the work to bring all of this in, @cquinn540! Looking forward to the further steps to bring all this up to Playwright standards 😊