feat: add demo for yaml style automation (#13)

* feat: add demo for yaml scripts

* feat: add demo for yaml scripts

* feat: update yaml demo

* feat: add github actions

Author: yuyutaotao

.github/workflows/command-line-demo.yaml .github/workflows/yaml-scripts-demo.yaml

@@ -1,4 +1,4 @@
-name: Command Line Demo
+name: Yaml Scripts Demo
 
 on:
   workflow_dispatch:
@@ -10,7 +10,7 @@ on:
       output_folder:
         description: 'Midscene report directory'
         required: true
-        default: 'command-line/midscene_run/report/'
+        default: 'yaml-scripts/midscene_run/report/'
   push:
     branches:
       - main
@@ -29,13 +29,8 @@ jobs:
           MIDSCENE_DEBUG_AI_PROFILE: 1
         run: |
           npm i -g @midscene/cli@${{ github.event.inputs.tag }}
-          cd command-line
-          echo "Run sauce-demo.sh"
-          ./sauce-demo.sh
-          echo "Run extract-github-status.sh"
-          ./extract-github-status.sh
-          echo "Run local-static-server.sh"
-          ./local-static-server.sh
+          cd yaml-scripts
+          midscene ./midscene-scripts/
 
       - name: List directory contents
         run: ls -R ${{ github.workspace }}

README.md

@@ -6,6 +6,6 @@ Examples for [Midscene](https://github.com/web-infra-dev/midscene).
 
 Here are some examples you can refer to:
 
-- [Playwright-demo](./playwright-demo/): Integrate Midscene with Playwright, including ai action, query ,cache, and report.
-- [Puppeteer-demo](./puppeteer-demo/): Integrate Midscene with Puppeteer, including ai action, query, cache, and report.
-- [Command Line](./command-line/): Using Midscene as a command line tool.
+- [Automate with Scripts in YAML](./yaml-scripts-demo/): Automate with scripts in YAML. This is the easiest way to integrate Midscene with your existing project.
+- [Integrate with Playwright](./playwright-demo/): Integrate Midscene with Playwright, including ai action, query ,cache, and report.
+- [Integrate with Puppeteer](./puppeteer-demo/): Integrate Midscene with Puppeteer, including ai action, query, cache, and report.

command-line/README.md

@@ -13,8 +13,8 @@
   "devDependencies": {
     "@midscene/web": "0.8.4",
     "@playwright/test": "1.48.0",
-    "@types/jest": "~29.5.13",
-    "@types/node": "~22.7.5",
+    "@types/jest": "~29.5.14",
+    "@types/node": "~22.7.9",
     "dotenv": "16.4.5",
     "eslint-plugin-prettier": "~5.2.1",
     "rimraf": "~6.0.1",

command-line/extract-github-status.sh

@@ -1,3 +1,4 @@
+package-lock.json
 
 # Midscene.js dump files
 midscene_run/midscene-report

command-line/local-static-server.sh

@@ -9,7 +9,7 @@
         "test": "tsx demo.ts"
     },
     "author": "",
-    "license": "ISC",
+    "license": "MIT",
     "devDependencies": {
         "@midscene/web": "latest",
         "puppeteer": "^23.4.0",

command-line/sauce-demo-expect-fail.sh

@@ -1,5 +1,7 @@
-*.json
+output/
+package-lock.json
 
 # Midscene.js dump files
 midscene_run/report
 midscene_run/dump
+midscene_run/tmp

command-line/sauce-demo.sh

@@ -0,0 +1,66 @@
+# Yaml Scripts
+
+## Preparation
+
+Ensure that Node.js is installed. Install the `@midscene/cli` globally
+
+```shell
+npm i -g @midscene/cli
+```
+
+Config the API key
+
+```shell
+# replace by your own
+export OPENAI_API_KEY="sk-abcdefghijklmnopqrstuvwxyz"
+```
+
+## Run
+
+Run all scripts
+
+```shell
+midscene ./midscene-scripts/
+```
+
+Extract status info from github status page
+
+```shell
+midscene ./midscene-scripts/extract-github-status.yaml
+```
+
+Perform a testing case on sauce demo
+
+```shell
+midscene ./midscene-scripts/sauce-demo.yaml
+```
+
+Perform a search on ebay.com
+
+```shell
+midscene ./midscene-scripts/search-headphone-on-ebay.yaml
+```
+
+Serve the `server_root` folder as a static server and test the `index.html` file
+
+```shell
+midscene ./midscene-scripts/local-static-server.yml
+```
+
+## Debug
+
+Run a script with headed mode (i.e. you can see the browser window when running)
+
+```shell
+midscene --headed ./midscene-scripts/sauce-demo.yaml
+```
+
+Keep the browser window open after the script finishes
+
+```shell
+midscene --keep-open ./midscene-scripts/sauce-demo.yaml
+```
+
+# Reference
+
+https://midscenejs.com/automate-with-scripts-in-yaml.html

command-line/search-headphone-on-ebay.sh

@@ -0,0 +1,10 @@
+target:
+  url: https://www.githubstatus.com/
+  output: ./output/github-status.json
+
+tasks:
+  - name: extract github status
+    flow:
+      - aiQuery: >
+          {name: string, status: string}[], service status of github page
+        name: status

playwright-demo/package.json

@@ -0,0 +1,10 @@
+# serve a local static server and assert the button text
+
+target:
+  serve: ./public
+  url: index.html
+
+tasks:
+  - name: assert button text
+    flow:
+      - aiAssert: The button text is 'Start'

puppeteer-demo/.gitignore

@@ -0,0 +1,17 @@
+# login to sauce demo, extract the items info into a json file, and assert the price of 'Sauce Labs Fleece Jacket'
+
+target:
+  url: https://www.saucedemo.com/
+  output: ./output/sauce-demo-items.json
+
+tasks:
+  - name: login
+    flow:
+      - aiAction: type 'standard_user' in user name input, type 'secret_sauce' in password, click 'Login'
+
+  - name: extract items info
+    flow:
+      - aiQuery: >
+          {name: string, price: number, actionBtnName: string}[], return item name, price and the action button name on the lower right corner of each item (like 'Remove')
+        name: items
+      - aiAssert: The price of 'Sauce Labs Fleece Jacket' is 49.99

puppeteer-demo/package.json

@@ -0,0 +1,27 @@
+# search headphone on ebay, extract the items info into a json file, and assert the shopping cart icon
+
+target:
+  url: https://www.ebay.com
+  # emulate a mobile device
+  viewportWidth: 400 
+  viewportHeight: 1200
+  deviceScaleFactor: 2
+  userAgent: "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Mobile Safari/537.36"
+  output: ./output/ebay-headphones.json
+
+tasks:
+  - name: search headphones
+    flow:
+      - aiAction: type 'Headphones' in search box, hit Enter
+      - aiWaitFor: there is at least one headphone item on page
+        timeout: 10000
+
+  - name: extract headphones info
+    flow:
+      - aiQuery: >
+          {name: string, price: number, actionBtnName: string}[], return item name, price and the action button name on the lower right corner of each item (like 'Remove')
+        name: headphones
+
+  - name: assert shopping cart icon
+    flow:
+      - aiAssert: There is a shopping cart icon on the top right

command-line/.gitignore yaml-scripts-demo/.gitignore

@@ -0,0 +1,16 @@
+{
+  "name": "yaml-scripts-demo",
+  "private": true,
+  "version": "1.0.0",
+  "description": "> quick start",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "test": "midscene ./midscene-scripts"
+  },
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@midscene/cli": "beta"
+  }
+}