Describe POST /test example parameters

[tmotyl]

readme says "screenshot: screenshot is the image itself. PNGs are preferred"
^^ what type is expected? should it be path to the image on local hdd?

• if yes, how to put the images to spectre before sending the request? (Assuming spectre is on separate server than tests)
• if not, then what format should it be? base64 encoded ?

[zhindetz]

Hi, I've had the same question.
At first I've tried to run the built-in demo test. But I've got issues with Poltergeist gem (it is a browser used in Spectre solution). I cannot run it both in Docker and in native Ruby on my Windows.
Then for a quick proof of concept I've used a Puppeteer (NodeJS browser on Chromium).
I've tried base64 and ASCII stringify for the screenshot but they dont work. Server side cannot understand image format.
Then I've learned how the built-in demo test works (demo_test_run in Ruby lang). It uses SpectreClient gem (spectre_client.rb file in gems repository folder). Which uses RestClient::Request (rest-client gem). Rest-client gem somehow does all the magic. It can put files inside Ruby objects. I haven't sniffed traffic to see how request looks. But I was not able to reproduce it by NodeJS means (I use form-data and axios modules). To make it simple for me I've decided to modify server-side of Spectre to match what I can do with NodeJS. So i've changed line 29 in test_controller.rb file of Spectre (./app/controllers folder of spectre-master).
From params.require(:test).permit(:name, :browser, :size, :screenshot, :run_id, :source_url, :fuzz_level, :highlight_colour, :crop_area)
to params.permit(:name, :browser, :size, :screenshot, :run_id, :source_url, :fuzz_level, :highlight_colour, :crop_area)

Now I do not need to send {test: {run_id: X, name: Y, screenshot: Z}} but I need simple {run_id: X, name: Y, screenshot: Z}
So I am sending multipart POST request with attached PNG file from NodeJS applet and it works.

I hope this can be helpful.

Appendix:

My Puppeteer code is (pupeteer.js) (sorry, but GitHub has issues with code formatting out of my control)

const puppeteer = require('puppeteer');
const axios = require('axios');
const fs = require('fs');
const FormData = require("form-data");

const url1 = 'https://youtube.com';
const width = 1024;
const height = width / 16 * 10;
const fuzzLevel = '10%'; // default is 30%, but I don't know what it is
const highlightColour = 'aa22ff'; // color to highlight difference
const project = 'Pupeteer Project';

axios
/* Create test run by sequence from storage (Spectre) * /
.post('http://localhost:3030/runs', {
'project': project,
'suite': 'Demo Tube'
})
.then(res => {
/* Remember test run id we created */
const testRunId = res.data.id;
console.log(`Create RUN response statusCode: ${res.status}`);
// console.log(res);
console.log(`Created testRunId = ${testRunId}`);

(async () => {
  
  const screenFileName = 'example.png';
  const testName = 'YouTube Home';
  const browserName = 'Puppeteer';
  
  /* Start browser with Puppeteer */
  const browser = await puppeteer.launch({ 'args': [`--window-size=${width},${height}`]});
  
  /* Prepare page */
  const page = await browser.newPage();
  await page.setViewport({
    'width': width,
    'height': height,
  });
  
  /* Open URL */
  await page.goto(url1);
  
  /* Save screenshot ('test' is a 'screenshot comparison') */
  await page.screenshot({ path: screenFileName });
  
  /* Prepare test data for test saving request */
  let form = new FormData();
  // form.append('test', 'ive removed this parameter');
  form.append('run_id', testRunId);
  form.append('name', testName);
  form.append('browser', browserName);
  form.append('size', width);
  form.append('source_url', url1);
  form.append('fuzz_level', fuzzLevel);
  form.append('highlight_colour', highlightColour);
  form.append('screenshot', fs.createReadStream(screenFileName));
  // form.append('crop_area', '640x480+50+100'); // crop seems to work if you need it, but I don't
  
  /* Save test (screenshot comparison) to storage (Spectre) */
  axios({
    method: 'POST',
    url: 'http://localhost:3030/tests',
    data: form,
    headers: {'content-type': `multipart/form-data; boundary=${form._boundary}`,
      ...form.getHeaders() }
  })
  .then(res => {
    console.log(`Create TEST response statusCode: ${res.status}`);
  });
  
  /* Close browser */
  await browser.close();
  
})();

})
.catch(error => {
console.error(error);
});

Run by command line node .\pupeteer.js in the folder with pupeteer.js

Prerequisites:

1. install NodeJS
2. in command line npm install puppeteer
3. in command line npm install axios
4. in command line npm install fs
5. in command line npm install form-data

[Firefishy]

Spectre hasn't seen active development for some time. Closing the issue, feel free to open at one of the forks.

Alternatively try a fork with active development:

• https://github.com/lanej0/spectre
• https://github.com/octanner/spectre