fix: e2e tests breaking in main

[ShubhamPalriwala]

What does this PR do?

Fixes Breaking E2E Tests in CI Pipeline

Uses branch code to test rather than main

Checklist

Required

• Filled out the "How to test" section in this PR
• Read How we Code at Formbricks
• Self-reviewed my own code
• Commented on my code in hard-to-understand bits
• Ran pnpm build
• Checked for warnings, there are none
• Removed all console.logs
• Merged the latest changes from main onto my branch with git pull origin main
• My changes don't cause any responsiveness issues

Appreciated

• If a UI change was made: Added a screen recording or screenshots to this PR
• Updated the Formbricks Docs if changes were necessary

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Ignored Deployments

Name	Status	Preview	Comments	Updated (UTC)
formbricks-cloud	⬜️ Ignored (Inspect)	Visit Preview		Mar 12, 2024 6:20am
formbricks-com	⬜️ Ignored (Inspect)	Visit Preview		Mar 12, 2024 6:20am

[github-actions]

Thank you for following the naming conventions for pull request titles! 🙏

[review-agent-prime]

apps/web/playwright/utils/helper.ts

It's a good practice to use constants for repeated strings. This makes the code easier to maintain and less prone to typos.
Create Issue
See the diff
Checkout the fix

    const ADD_QUESTION = "Add QuestionAdd a new question to your survey";
    const WELCOME_CARD = "Welcome CardEnabled";
    const THANK_YOU_CARD = "Thank You CardShown";

git fetch origin && git checkout -b ReviewBot/Impro-lwcagz4 origin/ReviewBot/Impro-lwcagz4

apps/web/playwright/js.spec.ts

Using descriptive variable names makes the code easier to understand. Instead of using generic names like 'htmlFile', use more descriptive names like 'surveyHtmlFile'.
Create Issue
See the diff
Checkout the fix

    let surveyHtmlFile = replaceEnvironmentIdInHtml(htmlFilePath, environmentId);
    await page.goto(surveyHtmlFile);

git fetch origin && git checkout -b ReviewBot/Impro-0a3z70o origin/ReviewBot/Impro-0a3z70o

apps/web/playwright/survey.spec.ts

There are several repeated code blocks in the test cases. It would be beneficial to refactor these into helper functions to improve readability and maintainability. This will also make the test cases more concise and easier to understand.
Create Issue
See the diff
Checkout the fix

    async function checkVisibilityAndClick(page: Page, locator: string) {
      await expect(page.locator(locator)).toBeVisible();
      await page.locator(locator).click();
    }

    // Use the helper function in the test cases
    await checkVisibilityAndClick(page, "#howToSendCardTrigger");
    await checkVisibilityAndClick(page, "#howToSendCardOption-web");
    await checkVisibilityAndClick(page, "#codeAction");
    // ...

git fetch origin && git checkout -b ReviewBot/Refac-12mdksl origin/ReviewBot/Refac-12mdksl

Currently, all the test cases are in a single describe block. It would be better to organize them into separate describe blocks based on the functionality they are testing. This will make the test cases more organized and easier to navigate.
Create Issue
See the diff
Checkout the fix

    test.describe("Survey Creation", () => {
      // ...
    });

    test.describe("Survey Submission", () => {
      // ...
    });

    test.describe("Survey Custom Actions", () => {
      // ...
    });

git fetch origin && git checkout -b ReviewBot/Impro-tzhlhg0 origin/ReviewBot/Impro-tzhlhg0

[mattinannt]

@ShubhamPalriwala thanks a lot for fixing the tests :-) Let's get this in production we can safely merge everything else :-)