Learning Azure DevOps

Just one of the things I'm learning. https://github.com/hchiam/learning

Just like Travis CI on GitHub, you can set up automated tests in Azure DevOps to run whenever you commit to master: use Pipelines, select a template, and it'll run automatically. azure-pipelines.yml can be automagically generated or manually created to set up your tests.

Current favourites: Selenium WebDriver example and Cypress example.

My first Azure DevOps git repo

https://dev.azure.com/hchiam/_git/test-azure-devops-project

Selenium IDE test example

https://dev.azure.com/hchiam/code-inspiration

Selenium IDE (as opposed to Selenium WebDriver) is very easy to set up locally: just install a Chrome Extension or Firefox Addon with a few clicks, and record actions directly in the browser. However, certain actions will not replay correctly when you use the CLI command, or require workarounds/tricks to work (in which case, you might want to use Cypress - see the other example).

This is an azure-pipelines.yml configuration file that runs the app while running a Selenium .side test: https://dev.azure.com/hchiam/_git/code-inspiration?path=%2Fazure-pipelines.yml

YAML: (Click to expand)

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'
  name: Azure Pipelines
  demands: npm

stages:
- stage: Test
  jobs:
  - job: TestJob
    displayName: Agent Job 1
    steps:
    - task: Npm@1
      displayName: install
      inputs:
        verbose: false

    - task: Npm@1
      displayName: 'install chromedriver'
      inputs:
        command: custom
        verbose: false
        customCommand: 'install chromedriver'

    - task: Npm@1
      displayName: 'install selenium-side-runner'
      inputs:
        command: custom
        verbose: false
        customCommand: 'install selenium-side-runner'

    - task: Npm@1
      displayName: 'install react-scripts'
      inputs:
        command: custom
        verbose: false
        customCommand: 'install react-scripts'

    - script: 'npx react-scripts build'
      displayName: 'build (npx)'

    - script: 'npx react-scripts start & npm run side-test'
      displayName: 'start (npx) & side-test'

Results:

https://dev.azure.com/hchiam/code-inspiration/_build/results?buildId=42&view=logs&j=bf812b03-26a5-57bb-2723-1df9c646b646&t=8be40cd7-2387-56cf-0dc5-8e64b7786d0a

https://dev.azure.com/hchiam/code-inspiration/_build

Cypress test example (+Cucumber/Gherkin)

https://dev.azure.com/hchiam/_git/test-cypress?path=README.md

The interface part of Cypress is very developer-friendly. Currently supports Chrome, Firefox, Edge, and Electron, but not Internet Explorer yet as of February 2020 (in which case, you might want to use Selenium WebDriver - see the other example).

Here's an example test configuration for Azure DevOps:

YAML: (Click to expand)

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: npm install
  displayName: 'Install Dependencies'

- script: npx cypress run
  displayName: 'Run Cypress Test'

Results:

https://dev.azure.com/hchiam/test-cypress/_build/results?buildId=48&view=logs&j=12f1170f-54f2-53f3-20dd-22fc7dff55f9&t=5caf77c8-9b10-50ef-b5c7-ca89c63e1c86

Selenium WebDriver test example (cross-browser testing)

https://dev.azure.com/hchiam/test-cross-browser-testing/_git/test-cross-browser-testing-selenium?path=README.md

Selenium WebDriver can run on Firefox, Chrome, Internet Explorer, and more. It has APIs for different programming languages, which includes JavaScript via selenium-webdriver.

Here's an example test configuration for Azure DevOps:

YAML: (Click to expand)

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: npm install
  displayName: 'Install Dependencies'

- script: node index
  displayName: 'Run Selenium WebDriver Test'

Results: https://dev.azure.com/hchiam/test-cross-browser-testing/_build/results?buildId=51&view=logs&j=12f1170f-54f2-53f3-20dd-22fc7dff55f9&t=5caf77c8-9b10-50ef-b5c7-ca89c63e1c86

In another repo, here's an example Selenium WebDriver test (running with Node.js) that runs Firefox in headless mode, has hover/mouseover step examples, and properly fails/passes husky pre-commit hooks: https://github.com/hchiam/code-inspiration/blob/5c60bbdeb8f445a5e3c1d7431378c78e71515b51/selenium-test.js

Another example

Further learning

https://www.youtube.com/watch?v=H-R2bCXfz8I

hchiam / learning-azure-devops Goto Github PK