node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

marjs

mar

Extend Selenium Webdriver to use with Angular apps.

Install

npm install --save-dev marjs

Usage

Let's say you have a simple angular app that hides or shows an <h1> element

<!doctype html>
<html lang="en" ng-app="MarApp">
<head>
  <meta charset="utf-8">
</head>
<body ng-controller="MarController">
  <div ng-show="mustShow">
    <h1 id="show">Show must go on!</h1>
  </div>
  <script src="./tests/angular/angular.min.js"></script> 
  <script src="./tests/controller.js"></script> 
</body>
</html>

And your angular app is simple as;

angular.module("MarApp", [])
.controller("MarController", ["$scope", function($scope){
  $scope.mustShow = false
}])

Here's an example on how to test this angular app changes with selenium using mar

import webdriver from 'selenium-webdriver'
import chai from 'chai'
import mar from 'marjs'
// aungular controller name to test scope changes 
const controllerName = "MarController"
let should = chai.should()
describe("Testing angular scope changes with mar", () => {
  
  let By = webdriver.By, until = webdriver.until
  let driver = new webdriver.Builder()
    .withCapabilities(webdriver.Capabilities.chrome())
    .build()
    // call to mar 
  mar(webdriver, driver, controllerName)
 
  after( () => {
    return driver.quit()
  })
 
  it("Test that changing scope bar mustShow, change UI", (done) => {
    // assuming you are running a server in the port 5000 
    driver
    .get("http://localhost:5000")
    // when the app starts the <h1> tab should be hidden, since in our scope the mustShow var is false 
    driver
    .findElement(By.id("show"))
    .isDisplayed()
    .then( (is) => {
      is.should.equal(false)
    })
    // now we'll apply a change on the angular scope, and test that the <h1> is showing 
    driver
    .$apply({mustShow:true})
    .then( () => {
      driver
      .findElement(By.id("show")
      .then( (el) => {
        el
        .isDisplayed()
        .then( (is) => {
          is.should.equal(true)
        })
      })
    })
  })
})

The full example is on test.js file.

Opinions and help are welcome.