diff --git a/frontend/src/tests/qa.test.ts b/frontend/src/tests/qa.test.ts index a86a0d0..32f277d 100644 --- a/frontend/src/tests/qa.test.ts +++ b/frontend/src/tests/qa.test.ts @@ -11,8 +11,15 @@ describe("Simple Puppeteer Test", () => { let browser: Browser; let page: Page; + const DEBUG = true; + const stacks = Object.values(Stack).slice(0, DEBUG ? 1 : undefined); + const models = Object.values(CodeGenerationModel).slice( + 0, + DEBUG ? 1 : undefined + ); + beforeAll(async () => { - browser = await puppeteer.launch({ headless: true }); + browser = await puppeteer.launch({ headless: false }); page = await browser.newPage(); await page.goto("http://localhost:5173/"); @@ -33,47 +40,70 @@ describe("Simple Puppeteer Test", () => { await browser.close(); }); - const stacks = Object.values(Stack).slice(0, 1); - const models = Object.values(CodeGenerationModel); - // For debugging - //.slice(0, 1); - models.forEach((model) => { stacks.forEach((stack) => { - it(`should load the homepage and check the title for stack: ${stack}`, async () => { - const testId = `${model}_${stack}`; + it( + `should load the homepage and check the title for stack: ${stack}`, + async () => { + const testId = `${model}_${stack}`; + const screenshotPathPrefix = `${SCREENSHOTS_PATH}/${testId}`; + await setupLocalStorage(page, stack, model); - await setupLocalStorage(page, stack, model); + // Upload file + const fileInput = (await page.$( + ".file-input" + )) as ElementHandle; - // Upload file - const fileInput = (await page.$( - ".file-input" - )) as ElementHandle; - - if (!fileInput) { - throw new Error("File input element not found"); - } - - await fileInput.uploadFile(IMAGE_PATH); - - // Screenshot the first step - await page.screenshot({ - path: `${SCREENSHOTS_PATH}/${testId}_image_uploaded.png`, - }); - - // Click the generate button and wait for the code to be generated - await page.waitForNetworkIdle(); - await page.waitForFunction( - () => document.body.innerText.includes("v1"), - { - timeout: 30000, + if (!fileInput) { + throw new Error("File input element not found"); } - ); - await page.screenshot({ - path: `${SCREENSHOTS_PATH}/${testId}_image_results.png`, - }); - }); + await fileInput.uploadFile(IMAGE_PATH); + + // Screenshot the first step + await page.screenshot({ + path: `${screenshotPathPrefix}_image_uploaded.png`, + }); + + // Click the generate button and wait for the code to be generated + await page.waitForNetworkIdle(); + await page.waitForFunction( + () => document.body.innerText.includes("v1"), + { + timeout: 30000, + } + ); + + await page.screenshot({ + path: `${screenshotPathPrefix}_image_results.png`, + }); + + await makeEdit( + page, + "make the header blue", + "v2", + screenshotPathPrefix + ); + + await makeEdit( + page, + "make all text italic", + "v3", + screenshotPathPrefix + ); + + await page.evaluate(() => { + document.querySelectorAll("div").forEach((div) => { + if (div.innerText.includes("v2")) { + div.click(); + } + }); + }); + + await makeEdit(page, "make all text red", "v4", screenshotPathPrefix); + }, + 60 * 1000 + ); }); }); }); @@ -98,3 +128,35 @@ async function setupLocalStorage(page: Page, stack: string, model: string) { // Reload the page to apply the local storage await page.reload(); } + +async function makeEdit( + page: Page, + edit: string, + version: string, + screenshotPathPrefix: string +) { + await page.type( + 'textarea[placeholder="Tell the AI what to change..."]', + edit + ); + + await page.screenshot({ + path: `${screenshotPathPrefix}_typed_${version}.png`, + }); + + await page.click(".update-btn"); + + console.log(version); + + await page.waitForFunction( + (version: string) => document.body.innerText.includes(version), + { + timeout: 30000, + }, + version + ); + + await page.screenshot({ + path: `${screenshotPathPrefix}_done_${version}.png`, + }); +}