Setup and migrate Discover tests to playwright

[cesarvarela]

• for now, the workflow only runs on deploy previews, and it is not a dependency for deployment
• I had to refactor the conditionalIntercept utility function because playwright handles requests differently
• no need for waitForStableDom anymore 🥳
• coverage is not set yet
• to view the results report, it needs to be downloaded from the run artifacts

I have been using this prompt with GPT 4o to great success so far:

I will ask you to convert the cypress tests to playwright.

Please take into account this:

Use typescript.

Be concise and only answer with the updated code.

Do not use jest.

Ignore cy.waitForStableDOM calls.

Ignore custom timeouts.

Ignore cy.wait(@somealias) that don't have expectations

Use page.locator('some selector').click() instead of page.click('some selector')

Use page.locator('some selector').fill('some value') instead of page.type('some selector', 'some value')

Favor page.locator(':has-text("some test")') when matching objects by text

Use test instead of it, and don't forget to destructure from the first parameter the page property

cy.query now is just query

The conditionalIntercept function has been updated and looks like this:

const waitForRequestMap = new Map<string, Promise<Request>>();

export async function conditionalIntercept(
    page: Page,
    url: string,
    condition: (request: Request) => boolean,
    response,
    alias: string = null
) {
    await page.route(url, async (route: Route) => {

        const req = route.request();

        if (condition(req)) {
            await route.fulfill({
                contentType: 'application/json',
                body: JSON.stringify(response),
            });
        }
        else {
            await route.fallback();
        }
    });

    if (alias) {

        waitForRequestMap.set(alias, page.waitForRequest((req) => minimatch(req.url(), url) && condition(req)));
    }
}

It has a complementary function that should be used instead of cy.wait(@somealias):

export async function waitForRequest(alias: string) {

    const promise = waitForRequestMap.get(alias);

    waitForRequestMap.delete(alias);

    return promise;
}



For example:

cy.conditionalIntercept(
    '**/graphql',
    (req) => req.body.operationName == 'UpdateReport',
    'updateReport',
    flaggedReport
);

gets converted to:


await conditionalIntercept(
    '**/graphql',
    (req) => req.body.operationName == 'UpdateReport',
    flaggedReport,
    'updateReport',
);


And: 

cy.wait('@updateReport')
    .its('request.body.variables')
    .then((variables) => {
        expect(variables.query.report_number).to.equal(23);
        expect(variables.set).deep.eq({
            flag: true,
            date_modified: now.toISOString(),
            epoch_date_modified: getUnixTime(now),
        });
});

gets converted to:


const updateReportRequest = (await waitForRequest('updateReport'))
const variables = updateReportRequest.postDataJSON().variables;
expect(variables.query.report_number).toBe(23);
expect(variables.set).toEqual({
    flag: true,
    date_modified: now.toISOString(),
    epoch_date_modified: getUnixTime(now),
});



The conditionalIt function has been updated and looks like this:

export function conditionalIt(condition: boolean, description: string, fn: any) {
    if (condition) {
        test(description, fn);
    }
}


The maybeIt function has been updated and looks like this:

export const maybeIt = config.E2E_ADMIN_USERNAME && config.E2E_ADMIN_PASSWORD ? test : test.skip;


For tests that require login:

cy.login(Cypress.env('e2eUsername'), Cypress.env('e2ePassword'));

gets converted to

await login(page, config.E2E_ADMIN_USERNAME, config.E2E_ADMIN_PASSWORD);

I'm a prompt engineer now?

[cypress]

Passing run #2549 ↗︎

0

486

248

0

0

Details:

Setup and migrate Discover tests to playwright
Project: aiid-site	Commit: 837e832376
Status: Passed	Duration: 17:43 💡
Started: May 31, 2024 11:40 PM	Ended: May 31, 2024 11:58 PM

Review all test suite changes for PR #2807 ↗︎

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 86.25%. Comparing base (03afdc3) to head (837e832).

❗ Current head 837e832 differs from pull request most recent head 3b5905c

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

Additional details and impacted files

@@             Coverage Diff              @@
##           staging    #2807       +/-   ##
============================================
- Coverage    99.33%   86.25%   -13.09%     
============================================
  Files           12      251      +239     
  Lines         4845     8441     +3596     
  Branches        25     2655     +2630     
============================================
+ Hits          4813     7281     +2468     
- Misses          32     1076     +1044     
- Partials         0       84       +84     

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

[cesarvarela]

@kepae @pdcp1 plase take a look, and let's merge it since it is not blocking and it is a good start

cc @clari182 @lmcnulty

example run: https://github.com/aiidtest/aiid/actions/runs/9389380049/job/25857480463

[kepae]

Welcome to our new await-filled world!