microsoft · abchatra · Jul 31, 2019 · May 23, 2019 · May 27, 2019 · May 30, 2019
diff --git a/.gitignore b/.gitignore
@@ -24,4  24,10 @@ paper.fls
 paper.fdb_latexmk
 paper.aux
 tests/**/*.local.*
-package-lock.json
 package-lock.json
 tests/ui-test/node_modules
 tests/ui-test/.vs 
 tests/ui-test/package-lock.json
 tests/ui-test/debug.log
 tests/ui-test/chromedriver.exe
 tests/ui-test/screenshot/**
diff --git a/tests/ui-test/.gitignore b/tests/ui-test/.gitignore
@@ -0,0  1,2 @@
 node_modules
 screenshots
diff --git a/tests/ui-test/.vscode/launch.json b/tests/ui-test/.vscode/launch.json
@@ -0,0  1,24 @@
 {
   // Use IntelliSense to learn about possible attributes.
   // Hover to view descriptions of existing attributes.
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
     {
       "type": "node",
       "request": "launch",
       "name": "Mocha Tests",
       "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
       "args": [
         "${workspaceFolder}/src/index.js",
         "--require",
         "@babel/register",
         "--require",
         "@babel/polyfill",
         "--colors",
         "--no-timeouts"
       ],
       "internalConsoleOptions": "openOnSessionStart"
     }
   ]
 }
diff --git a/tests/ui-test/README.md b/tests/ui-test/README.md
@@ -0,0  1,30 @@
 # Micro:bit UI test 
 
 This is the selenium UI test for Micro:bit.
 
 ## Download and Build
 
 1. Clone the PXT git repository
 2. Install Chrome browser if you don't have it on your computer.
 3. Download ChromeDriver from https://sites.google.com/a/chromium.org/chromedriver/downloads. The downloaded file is a zip file. Extract it and place the executable in a folder in your PATH. Please note that there are multiple versions of ChromeDriver in download list. You need to make sure your ChromeDriver's version matches your Chrome version.
 4. Open folder tests/ui-test
 5. Install required node.js modules for the selenium test
 
 ```
 npm install
 ```
 
 ## Run in command line
 
 ```
 npm test
 ```
 
 ## Run and Debug in VS Code
 
 1. Open VS Code 
 2. Open project `ui-test` folder in VS Code
 3. Click `Debug`
 4. Choose `Mocha Tests` in Debug
 5. Click `Start Debugging`
 
diff --git a/tests/ui-test/package.json b/tests/ui-test/package.json
@@ -0,0  1,26 @@
 {
   "name": "pxt-ui-test",
   "version": "1.0.0",
   "description": "Selenium ui test for Micro:bit",
   "main": "Main.js",
   "scripts": {
     "test": "node_modules/.bin/mocha ./src/index.js --require @babel/register --require @babel/polyfill --timeout 100000"
   },
   "type": "module",
   "author": "Helen Ma",
   "license": "MIT",
   "dependencies": {
     "chromedriver": "^2.46.0",
     "dateformat": "^3.0.3",
     "selenium-webdriver": "^4.0.0-alpha.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.4.4",
     "@babel/core": "^7.4.5",
     "@babel/polyfill": "^7.4.4",
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-es2015": "^7.0.0-beta.53",
     "@babel/register": "^7.4.4",
     "mocha": "^6.1.4"
   }
 }
diff --git a/tests/ui-test/src/.jshintrc b/tests/ui-test/src/.jshintrc
@@ -0,0  1,3 @@
 {
     "esversion": 8
 }
diff --git a/tests/ui-test/src/index.js b/tests/ui-test/src/index.js
@@ -0,0  1,7 @@
 // Transpile all code following this line with babel and use '@babel/preset-env' (aka ES6) preset.
 require("@babel/register")({
     presets: ["@babel/preset-env"]
 });
 
 // Import the rest of our application.
 module.exports = require('./main.js');
diff --git a/tests/ui-test/src/lib/dom-object.js b/tests/ui-test/src/lib/dom-object.js
@@ -0,0  1,80 @@
 import { By } from 'selenium-webdriver';
 import fs from 'fs';
 import dateformat from 'dateformat';
 
 const screenshotsFolder = './screenshots';
 
 export class DomObject {
 
     async actionForAll(actionName, findBys) {
         for (let criteria of findBys) {
             if (criteria) {
                 console.debug(`Try to click the element by criteria: ${criteria}`);
 
                 let findBy = this.findBy(criteria);
 
                 //wait until the element can be located
                 let element = await this.waitforElementLocated(findBy);
 
                 //Sleep for 2 seconds to make sure the element's state is stable for interactions
                 await driver.sleep(2000);
 
                 await element[actionName]();
             }
         }
         return true;
     }
 
     async waitforElementLocated(criteria) {
         let findBy = this.findBy(criteria);
 
         let element = await driver.wait(until.elementLocated(findBy));
         return element;
     }
 
     findBy(criteria) {
         if (typeof criteria === 'string') {
             return By.css(criteria);
         }
         return criteria;
     }
 
     async getText(criteria) {
         let element = await this.waitforElementLocated(this.findBy(criteria));
         return await element.getText();
     }
 
     async sendKeys(criteria, keys) {
 
         let element = await driver.findElement(this.findBy(criteria));
         await element.sendKeys(keys);
         return true;
     }
 
 
     async click(...findBys) {
         return await this.actionForAll('click', findBys);
     }
 
     async takeScreenshot(name) {
         if (!fs.existsSync(screenshotsFolder)) {
             fs.mkdirSync(screenshotsFolder);
         }
 
         let base64String = await driver.takeScreenshot();
         let fileName = name   "-"   dateformat(new Date(), "yyyymmddHHMMssl");
 
         fs.writeFile(`${screenshotsFolder}/${fileName}.png`, base64String, 'base64', function (err) {
             if (!err) {
                 console.error(err);
             }
         });
 
         return true;
     }
 
     async getAttribute(criteria, attributeName) {
         let element = await this.waitforElementLocated(this.findBy(criteria));
         return element.getAttribute(attributeName);
     }
 }
diff --git a/tests/ui-test/src/lib/website.js b/tests/ui-test/src/lib/website.js
@@ -0,0  1,42 @@
 import { Builder, until } from 'selenium-webdriver';
 import { chrome } from 'selenium-webdriver/chrome';
 
 
 const WEBSITE_URL = "https://makecode.microbit.org"
 
 class Website {
 
     constructor(rootURL = WEBSITE_URL) {
         this.rootURL = rootURL;
     }
 
     async open(path = "") {
         var fullPath = this.getUrl(path);
         console.info(`Open url ${fullPath}`);
 
         await driver.get(fullPath);
 
         console.info(`Opened URL ${fullPath}`);
         return await driver.manage().window().maximize();
     }
 
     getUrl(path) {
         if (!path.startsWith("/")) {
             path = "/"   path;
         }
         return this.rootURL   path;
     }
 
     close() {
         console.info("Close webstie...");
         driver.quit();
     }
 }
 
 global.driver = new Builder()
     .forBrowser('chrome')
     .build();
 global.until = until;
 
 
 export let website = new Website();
diff --git a/tests/ui-test/src/main.js b/tests/ui-test/src/main.js
@@ -0,0  1,16 @@
 import { website } from "./lib/website";
 import webdriver from 'selenium-webdriver';
 import { chrome } from 'selenium-webdriver/chrome';
 
 import { newProjectPage } from './new-project'
 
 describe('Micro:bit Test', function () {
     before(async () => {
         return await website.open("beta");
     });
     after(function () {
         website.close();
     });
 
     newProjectPage.test();
 });
diff --git a/tests/ui-test/src/new-project.js b/tests/ui-test/src/new-project.js
@@ -0,0  1,46 @@
 import { DomObject } from './lib/dom-object';
 import assert from 'assert';
 
 
 class NewProjectPage extends DomObject {
 
     async testCreateNewProject() {
 
         console.debug("Start testCreateNewProject()");
 
         //Create a new project
         await this.click('.newprojectcard', '.openproject');
 
         //Close the new project name input popup
         await this.click('.closeIcon');
 
         await this.takeScreenshot('editorPage1');
 
         //Assert the title is correct
         assert.equal(await this.getAttribute('.openproject', 'title'), 'Home');
 
         //Open the project name input popup again
         await this.click('.openproject');
         //Name the new project to "Project1"
         await this.sendKeys('input#projectNameInput', 'Project1');
 
         //Confirm the changes
         await this.click('.button.positive');
 
         //Validate the project is correctly created
         let text = await this.getText("[aria-label='My Projects'] .carouselitem:nth-child(2) .header");
         console.debug(`The header text in the first DIV of 'My Projects' is "${text}"`);
 
         assert.equal(text, "Project1");
 
         return true;
     }
 
     test() {
         it('Creae a new project and open it', async () => {
             return await this.testCreateNewProject();
         });
     }
 }
 
 export let newProjectPage = new NewProjectPage();