Add click to the browser code

Signed-off-by: Daniel González Lopes <danielgonzalezlopes@gmail.com>
grafana · Apr 17, 2023 · d56151e · d56151e
1 parent 75e729a
commit d56151e
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 9 deletions.
diff --git a/k6/09.composability.js b/k6/09.composability.js
@@ -78,14 +78,23 @@ export function getPizza() {
 
 export async function checkFrontend() {
   const browser = chromium.launch({ headless: true });
-  const page = browser.newPage();
+  const context = browser.newContext(
+    { viewport: { width: 1920, height: 1080 } },
+  );
+  const page = context.newPage();
 
   try {
     await page.goto(BASE_URL, { waitUntil: 'networkidle' })
-    page.screenshot({ path: `screenshots/${__ITER}.png` });
     check(page, {
       'header': page.locator('h1').textContent() == 'Looking to break out of your pizza routine?',
     });
+
+    await page.click('button', { text: 'Pizza, Please!' });
+    await page.waitForTimeout(500);
+    page.screenshot({ path: `screenshots/${__ITER}.png` });
+    check(page, {
+      'recommendation': page.locator('div#recommendations').textContent() != '',
+    });
   } finally {
     page.close();
     browser.close();

diff --git a/k6/browser.js b/k6/browser.js
@@ -4,15 +4,24 @@ import { check } from 'k6';
 const BASE_URL = __ENV.BASE_URL || 'http://localhost:3333';
 
 export default async function () {
-  const browser = chromium.launch({ headless: false });
-  const page = browser.newPage();
+  const browser = chromium.launch({ headless: true });
+  const context = browser.newContext(
+    { viewport: { width: 1920, height: 1080 } },
+  );
+  const page = context.newPage();
 
   try {
     await page.goto(BASE_URL, { waitUntil: 'networkidle' })
-    page.screenshot({ path: 'screenshot.png' });
     check(page, {
       'header': page.locator('h1').textContent() == 'Looking to break out of your pizza routine?',
     });
+
+    await page.click('button', { text: 'Pizza, Please!' });
+    await page.waitForTimeout(500);
+    page.screenshot({ path: 'screenshot.png' });
+    check(page, {
+      'recommendation': page.locator('div#recommendations').textContent() != '',
+    });
   } finally {
     page.close();
     browser.close();

diff --git a/k6/shared/frontend/basic.js b/k6/shared/frontend/basic.js
@@ -3,14 +3,23 @@ import { check, sleep } from "k6";
 
 export async function LoadAndCheck(url, headless) {
   const browser = chromium.launch({ headless: headless });
-  const page = browser.newPage();
-
+  const context = browser.newContext(
+    { viewport: { width: 1920, height: 1080 } },
+  );
+  const page = context.newPage();
+
   try {
     await page.goto(url, { waitUntil: 'networkidle' })
-    page.screenshot({ path: `screenshots/${__ITER}.png` });
     check(page, {
       'header': page.locator('h1').textContent() == 'Looking to break out of your pizza routine?',
     });
+
+    await page.click('button', { text: 'Pizza, Please!' });
+    await page.waitForTimeout(500);
+    page.screenshot({ path: `screenshots/${__ITER}.png` });
+    check(page, {
+      'recommendation': page.locator('div#recommendations').textContent() != '',
+    });
   } finally {
     page.close();
     browser.close();

diff --git a/pkg/web/src/routes/+page.svelte b/pkg/web/src/routes/+page.svelte
@@ -238,7 +238,7 @@
 			{/if}
 			<p>
 				{#if pizza['pizza']}
-					<div class="flex justify-center">
+					<div class="flex justify-center" id="recommendations">
 						<div class="w-[300px] sm:w-[500px] mt-6 bg-gray-50 border border-gray-200 rounded-lg">
 							<div class="text-left p-4">
 								<h2 class="font-medium">Our recommendation:</h2>