quay/screenshots/screenshots.js

var width = 1024;
var height = 768;

var casper = require('casper').create({
  viewportSize: {
    width: width,
    height: height
  },
  verbose: true,
  logLevel: "debug"
});

var options = casper.cli.options;
var isDebug = !!options['d'];

var rootUrl = isDebug ? 'http://localhost:5000/' : 'https://quay.io/';
var repo = isDebug ? 'complex' : 'r0';
var org = isDebug ? 'buynlarge' : 'quay'
var orgrepo = 'orgrepo'

var outputDir = "screenshots/";

casper.on("remote.message", function(msg, trace) {
  this.echo("Message: " + msg, "DEBUG");
});

casper.on("page.error", function(msg, trace) {
  this.echo("Page error: " + msg, "ERROR");
  for (var i = 0; i < trace.length; i++) {
    this.echo(JSON.stringify(trace[i]), "ERROR");
  }
});

casper.start(rootUrl + 'signin', function () {
  this.fill('.form-signin', {
    'username': 'devtable',
    'password': isDebug ? 'password': 'C>K98%y"_=54x"<',
  }, false);
});

casper.thenClick('.form-signin button[type=submit]', function() {
  this.waitForText('Top Repositories');
});

casper.then(function() {
  this.log('Generating user home screenshot.');
});

casper.then(function() {
  this.capture(outputDir + 'user-home.png');
});

casper.then(function() {
  this.log('Generating repository view screenshot.');
});

casper.thenOpen(rootUrl + 'repository/devtable/' + repo + '?tag=v2.0', function() {
  // Wait for the tree to initialize.
  this.waitForSelector('.image-tree', function() {
    // Wait for the tree's animation to finish.
    this.wait(4000);
  });
});

casper.then(function() {
  this.capture(outputDir + 'repo-view.png');
});

casper.then(function() {
  this.log('Generating repository changes screenshot.');
});

casper.thenClick('#current-image dd a', function() {
  this.waitForSelector('.result-count', function() {
    this.capture(outputDir + 'repo-changes.png', {
      top: 0,
      left: 0,
      width: width,
      height: height
    });
  });
})

casper.then(function() {
  this.log('Generating repository admin screenshot.');
});

casper.thenOpen(rootUrl + 'repository/devtable/' + repo + '/admin', function() {
  this.waitForSelector('.repo-access-state');
});

casper.then(function() {
  this.capture(outputDir + 'repo-admin.png');
});

casper.then(function() {
  this.log('Generating organization repo list screenshot.');
});

casper.thenOpen(rootUrl + 'repository/?namespace=' + org, function() {
  this.waitForText('Repositories');
});

casper.then(function() {
  this.capture(outputDir + 'org-repo-list.png');
});

casper.then(function() {
  this.log('Generating organization teams screenshot.');
});

casper.thenOpen(rootUrl + 'organization/' + org, function() {
  this.waitForSelector('.organization-name');
});

casper.then(function() {
  this.capture(outputDir + 'org-teams.png');
});

casper.then(function() {
  this.log('Generating organization admin screenshot.');
});

casper.thenOpen(rootUrl + 'organization/' + org + '/admin', function() {
  this.waitForSelector('#repository-usage-chart');
});

casper.then(function() {
  this.capture(outputDir + 'org-admin.png');
});

casper.then(function() {
  this.log('Generating organization logs screenshot.');
});

casper.thenClick('a[data-target="#logs"]', function() {
  this.waitForSelector('svg > g', function() {
    this.wait(1000, function() {
      this.capture(outputDir + 'org-logs.png');
    });
  });
});

casper.then(function() {
  this.log('Generating oganization repository admin screenshot.');
});

casper.thenOpen(rootUrl + 'repository/' + org + '/' + orgrepo + '/admin', function() {
  this.waitForText('outsideorg')
});

casper.then(function() {
  this.capture(outputDir + 'org-repo-admin.png');
});

casper.run();