feat: update showcase

apps/site/docs/doc/getting-started/quick-start.md

@@ -32,27 +32,44 @@ const browser = await puppeteer.launch({
 });
 
 const page = await browser.newPage();
-await page.goto('https://www.bing.com');
+await page.goto('https://www.ebay.com');
 await page.waitForNavigation({
   timeout: 20 * 1000,
   waitUntil: 'networkidle0',
 });
 const page = await launchPage();
 
 // init MidScene agent
-const agent = new PuppeteerAgent(page);
-await agent.aiAction('type "how much is the ferry ticket in Shanghai" in search box, hit Enter');
+const mid = new PuppeteerAgent(page);
 
+// perform a search
+await mid.aiAction('type "Headphones" in search box, hit Enter');
+await sleep(5000);
+
+// find the items
+const items = await mid.aiQuery(
+  '{itemTitle: string, price: Number}[], find item in list and corresponding price',
+);
+console.log('headphones in stock', items);
 ```
 
-Using ts-node to run:
+Using ts-node to run, you will get the data of Headphones on ebay:
 
 ```bash
 # run
 npx ts-node demo.ts
 
-# it should print '... is blue'
+# it should print 
+#  [
+#   {
+#     itemTitle: 'JBL Tour Pro 2 - True wireless Noise Cancelling earbuds with Smart Charging Case',
+#     price: 551.21
+#   },
+#   {
+#     itemTitle: 'Soundcore Space One无线耳机40H ANC播放时间2XStronger语音还原',
+#     price: 543.94
+#   }
+# ]
 ```
 
 After running, MidScene will generate a log dump, which is placed in `./midscene_run/latest.web-dump.json` by default. Then put this file into [Visualization Tool](/visualization/), and you will have a clearer understanding of the process.
-

apps/site/docs/doc/prompting-tips.md

@@ -26,7 +26,7 @@ Ensure everything you expect from the LLM is visible in the screenshot.
 
 For example:
 
-Good ✅: "string, color of text, one of blue / red / yellow / green / white / black / others
+Good ✅: "string, color of text, one of blue / red / yellow / green / white / black / others"
 
 Bad ❌: "string, hex value of text color"
 

packages/visualizer/src/index.less

@@ -42,8 +42,8 @@ footer.mt-8{
   flex-direction: column;
   height: 100%;
   color: #000;
-  font-size: 14px;
   font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  font-size: 14px;
 }
 
 .ant-layout {

packages/web-integration/tests/puppeteer/showcase.spec.ts

@@ -0,0 +1,36 @@
+import { it, describe, expect, vi } from 'vitest';
+import { sleep } from '@midscene/core/utils';
+import { launchPage } from './utils';
+import { PuppeteerAgent } from '@/puppeteer';
+
+vi.setConfig({
+  testTimeout: 60 * 1000,
+});
+
+describe('puppeteer integration', () => {
+  it('search headphones on ebay', async () => {
+    const page = await launchPage('https://www.ebay.com');
+    const mid = new PuppeteerAgent(page);
+
+    // perform a search
+    await mid.aiAction('type "Headphones" in search box, hit Enter');
+    await sleep(5000);
+
+    // find the items
+    const items = await mid.aiQuery(
+      '{itemTitle: string, price: Number}[], find item in list and corresponding price',
+    );
+    console.log('headphones in stock', items);
+    expect(items.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it('extract the Github service status', async () => {
+    const page = await launchPage('https://www.githubstatus.com/');
+    const mid = new PuppeteerAgent(page);
+
+    const result = await mid.aiQuery(
+      'this is a service status page. Extract all status data with this scheme: {[serviceName]: [statusText]}',
+    );
+    console.log('Github service status', result);
+  });
+});