BrowserStack

👉 多裝置、多瀏覽器、多版本的端點測試方案

E2E framework 方案選擇

因為 Vue Cli 剛好有預設 Cypress 為 E2E framework ，所以選擇此方案

SetUp

註冊 BrowserStack 帳號並取得 username & access key

BrowserStack Login | Sign Into The Best Mobile & Browser Testing Tool

Login to access our 3000+ browsers and Real iOS, Android devices for Mobile App and Cross Browser testing. Not a user? Get Started for Free.

https://www.browserstack.com/accounts/settings

全域安裝 BrowserStack Cypress Cli

npm install -g browserstack-cypress-cli

資料夾結構

├── test
│   ├── plugins
│   │     └── index.js             # 實際上的 cypress configuration
│   └── specs
│         └── test.js              # test case
├── ...
├── cypress.json                   # specify cypress configuration path
└── browserstack.json              # browserstack configuration

準備 browserstack.json

{
  "auth": {
    "username": <USER_NAME>,
    "access_key": <ACCESS_KEY>
  },
  "browsers": [
    {
      "os": "Windows 10",
      "browser": "chrome",
      "versions": ["latest"]
    }
  ],
  "run_settings": {
    "cypress_config_file": "./cypress.json",
    "cypress_version": "9",
    "project_name": "BrowserStack Cypress E2E Testing",
    "build_name": "Max_Testing",
    "parallels": "10"
  },
  "disable_usage_reporting": true
}

BrowserStack - Desktop Browsers for Cypress Testing

List of browsers available for Cypress tests. Test in Chrome, Firefox & Edge on Windows and Mac OS X.

https://www.browserstack.com/list-of-browsers-and-platforms/cypress_testing

cypress 設定

npm install @vue/cli-plugin-e2e-cypress

{
  "pluginsFile": "tests/e2e/plugins/index.js"
}

module.exports = (on, config) => {
  return Object.assign({}, config, {
    fixturesFolder: "tests/e2e/fixtures",
    integrationFolder: "tests/e2e/specs",
    screenshotsFolder: "tests/e2e/screenshots",
    videosFolder: "tests/e2e/videos",
    supportFile: "tests/e2e/support/index.js",

    env: {
      host: "https://insights.104.com.tw/"
    }
  });
};

Configuration | Cypress Documentation

This guide is for Cypress 10+ and the new JavaScript configuration file format.

https://docs.cypress.io/guides/references/configuration

Testing

撰寫 test case

describe("My First Test", () => {
  it("Visits the app root url", () => {
    cy.visit(Cypress.env("host"));
    cy.contains("div", "協助企業建立人資管理和營運績效正循環");
  });
});

run test

browserstack-cypress run

BrowserStack Login | Sign Into The Best Mobile & Browser Testing Tool

Login to access our 3000+ browsers and Real iOS, Android devices for Mobile App and Cross Browser testing. Not a user? Get Started for Free.

https://automate.browserstack.com/dashboard/v2/builds/

CI / CD

雇主的情況是不擋上線流程，但透過上線流程來 trigger BrowserStack

version: 0.2

env:
  variables:
    GITHUB_TAG_VERSION: "1.21.2094"
phases:
  install:
    runtime-versions:
      nodejs: 12
    commands:
      - npm install -g yarn
  pre_build:
    commands:
      - yarn install
      - yarn test
  build:
    commands:
      - yarn build:${ENV}
  post_build:
    commands:
      - test ${ENV} = "production" && aws s3 rm --recursive s3://${DEPLOY_BUCKET_NAME}/${GITHUB_TAG_VERSION} || echo Not Production, no need
      - test ${ENV} = "production" && aws s3 sync dist s3://${DEPLOY_BUCKET_NAME}/${GITHUB_TAG_VERSION} || echo Not Production, no need
      - aws s3 rm --recursive s3://${DEPLOY_BUCKET_NAME}/latest
      - aws s3 sync dist s3://${DEPLOY_BUCKET_NAME}/latest --region=ap-northeast-1
      - echo envType is .... ${ENV}
      - envType=${ENV}
      - |
        if [ ${envType} = "production" ]; then
          chmod +x ./browserstick.sh
          ./browserstick.sh
        elif [ ${envType} = "beta.production" ]; then
          chmod +x ./browserstick.sh
          ./browserstick.sh
        fi

#!/bin/bash

npm install -g browserstack-cypress-cli || echo "browserstack install failed..."
browserstack-cypress run || echo "browserstack test failed..."

Local Testing

Lab、Staging 環境想要跑測試會遇到問題，因為 BrowserStack 的機器無法進到公司內網，這時候要使用 BrowserStack 的 Local Test 功能：

{
  "auth": {
    "username": <USER_NAME>,
    "access_key": <ACCESS_KEY>
  },
  "browsers": [
    {
      "os": "Windows 10",
      "browser": "chrome",
      "versions": ["latest"]
    }
  ],
  "run_settings": {
    "cypress_config_file": "./cypress.json",
    "cypress_version": "9",
    "project_name": "BrowserStack Cypress E2E Testing",
    "build_name": "Max_Testing",
    "parallels": "1"
  },
    "connection_settings": {
    "local": true
  },
  "disable_usage_reporting": true
}

module.exports = (on, config) => {
  return Object.assign({}, config, {
    fixturesFolder: "tests/e2e/fixtures",
    integrationFolder: "tests/e2e/specs",
    screenshotsFolder: "tests/e2e/screenshots",
    videosFolder: "tests/e2e/videos",
    supportFile: "tests/e2e/support/index.js",

        pageLoadTimeout: 1000 * 90,
    env: {
      host: "https://local.employer-brand.insights.104-dev.com.tw:9527/"
    }
  });
};