@bytesnz

Jack Farley, Computer Engineer

  • home
  • about
  • 12/25/2020, 12:13:48 AM

    A new Litter Survey

    softwarelitterlitter-survey

    In a culmination of litter surveys and litter picks, linked data() and data exploration, and remoteStorage and ActivityPub, I have created a web-based litter pick/survey app that I hope will allow federated citizen science.

  • 12/13/2020, 6:00:00 PM

    Hoe Stream Trash

    litterpi-trash-camlitter-pick

    My latest litter pick target was Hoe Stream and the White Rose Lane Local Nature Reserve. Here's how it went.

  • 11/24/2020, 6:00:00 PM

    Release the Beast

    softwaregitlabcirelease

    I just created a Gitlab CI job to create a release with information from a CHANGELOG.md file for some of my projects. Here's how I did it.

  • 9/30/2020, 9:00:00 PM

    Gitlab CI Caching

    gitlabcontinuous integration

    I noticed something strange happening during build process during a multi-tasking bug fix. Turns out I was using Gitlab CI's caching incorrectly. I should have been using artifacts. Here's what I saw.

  • 9/21/2020, 6:00:00 PM

    Birthday Trash

    litterpi-trash-cam

    As a birthday treat, I took the day off work to try out my electronerised litter picker. Here's how it went.

  • 9/13/2020, 12:12:13 AM

    Pi Trash Cam

    raspberry pielectronicslitterpi-trash-cam

    In preparation for a day of litter picking, I finally got round to a project idea - attaching a camera to a litter picker to record it all. Here's what I did.

  • 8/25/2020, 9:29:58 PM

    yarn add --dev webdriverio

    first-draftsoftwaretestinggitlab

    I finally started implementing UI testing on first-draft using WebdriverIO. While writing tests was easy, getting the tests running was a little more difficult. Here is how I did it.

    I have been working on first-draft, an opensource (currently) canvas-based collaborative online drawing/annotation tool for a while now. I have been meaning to add UI testing to it, but I could never find something that would allow me to test in multiple browsers, do complex interactions and work with the web socket communications first-draft uses.

    I recently decided to look at UI testing libraries again and while I was looking back over WebdriverIO, a node-based testing framework using the WebDriver API, I managed to come across the function performActions. "The Perform Actions command is used to execute complex user actions." This had been the thing I had been looking for for months and never found it!

    I looked into the spec to see what the "actions" were and they were exactly what I needed - the ability to do complex pointer (mouse and touch) and keyboard interactions. The spec includes an example of pinch and zoom interaction

    [
      {
        "type": "pointer",
        "id": "finger1",
        "parameters": {"pointerType": "touch"},
        "actions": [
          {"type": "pointerMove", "duration": 0, "x": 100, "y": 100},
          {"type": "pointerDown", "button": 0},
          {"type": "pause", "duration": 500},
          {"type": "pointerMove", "duration": 1000, "origin": "pointer", "x": -50, "y": 0},
          {"type": "pointerUp", "button": 0}
        ]
      }, {
        "type": "pointer",
        "id": "finger2",
        "parameters": {"pointerType": "touch"},
        "actions": [
          {"type": "pointerMove", "duration": 0, "x": 100, "y": 100},
          {"type": "pointerDown", "button": 0},
          {"type": "pause", "duration": 500},
          {"type": "pointerMove", "duration": 1000, "origin": "pointer", "x": 50, "y": 0},
          {"type": "pointerUp", "button": 0}
        ]
      }
    ]

    I was instantly in love. Wondering if this could be the test framework for me, I tried to find a way I could deal with the Web Socket communications and I came across browser.execute, which allows you send javascript to run in the browser.

    The stars had aligned. I had everything I needed! Now I just needed to write some code.

    Mocking the Web Socket Client

    Once I have installed webdriverio using the getting started instructions and configured it to work with typescript files, I decided how I was going to run things.

    With the ability to run javascript on the page under test, I decided to create a mock web socket client for the app to use when running tests. The mock allows the test to see all the events that have been emitted by the app, send events to the app and add handler functions to respond to events emitted by the app.

    The mock socket object
    const socket = {
      sent: [],
      queue: [],
      mockers: {},
      addMocker: (event, handler) => {
        if (socket.mockers[event]) {
          if (socket.mockers[event].indexOf(handler) === -1) {
            socket.mockers[event].push(handler);
          }
        } else {
          socket.mockers[event] = [handler];
          let i = 0;
          while (i < socket.queue.length) {
            if (event === '*') {
              handler(socket.queue[i].event, socket.queue[i].data);
            } else if (socket.queue[i].event === event) {
              handler(socket.queue[i].data);
              socket.queue.splice(i, 1);
            } else {
              i++;
            }
          }
        }
      },
      removeMocker: (event, handler) => {
        if (socket.mockers[event]) {
          const index = socket.mockers[event].indexOf(handler);
          if (index !== -1) {
            socket.mockers[event].splice(index, 1);
          }
        }
      },
      handlers: {},
      on: (event, handler) => {
        if (socket.handlers[event]) {
          if (socket.handlers[event].indexOf(handler) === -1) {
            socket.handlers[event].push(handler);
          }
        } else {
          socket.handlers[event] = [handler];
        }
      },
      off: (event, handler) => {
        if (socket.handlers[event]) {
          const index = socket.handlers[event].indexOf(handler);
          if (index !== -1) {
            socket.handlers[event].splice(index, 1);
          }
        }
      },
      emit: (event, data) => {
        console.debug('%c<<< Emitted event', 'color: #860', event, data);
        socket.sent.push({ event, data });
        if (socket.mockers[event]?.length) {
          socket.mockers[event].map((handler) => handler(data));
        } else {
          socket.queue.push({ event, data });
        }
        (socket.mockers['*'] || []).map((handler) => handler(event, data));
      },
      emitMock: (event, data) => {
        console.debug('%c>>> Received event', 'color: #090', event, data);
        (socket.handlers[event] || []).map((handler) => handler(data));
      },
      clear: () => {
        socket.sent = [];
      }
    };

    Writing Tests

    With the mock socket client set up, I set about writing my first test. I wanted to make sure the app was redirecting to a blank draft and loading the toolbar. When first-draft initially loads, it send a connect event to the server requesting the draft from the server, so I had to use my mock socket client to respond with a null value (no exist) response. I then checked that the toolbar was displayed.

    The first test checking it was redirecting and asking for the draft
    import { blankDraft } from '../helpers/utils';
    
    describe('first-draft', () => {
      before(async () => {
        // Go to first-draft
        await browser.url('/');
        // Attach function to return with a blank draft when requested
        await browser.execute(blankDraft);
      });
    
      it('redirect to a random draft', async () => {
        expect(browser).toHaveUrlContaining('/d/');
      });
    
      it('requests the draft', async () => {
        // Get the draftId from the url
        const draftId = (await browser.getUrl()).replace(/^.*\/d\/(.*)\//, '$1');
        const connectEvent = await browser.execute(() =>
          window['socketEvents'].sent.find(
            (event) => event.event === 'draft:connect'
          )
        );
    
        expect(connectEvent).toBeDefined();
        expect(connectEvent.data.name).toEqual(draftId);
        expect(connectEvent.data.getDraft).toEqual(true);
      });
    });

    I saved the test file and ran the test runner

    $ yarn run test:ui
    wdio wdio.conf.js
    ...
     "spec" Reporter:
    ------------------------------------------------------------------
    [Chrome 84.0.4147.125 linux #0-0] Spec: first-draft/test/specs/redirect.ts
    [Chrome 84.0.4147.125 linux #0-0] Running: Chrome (v84.0.4147.125) on linux
    [Chrome 84.0.4147.125 linux #0-0] Session ID: 10f20b22-88dd-4297-965f-3b71302af99e
    [Chrome 84.0.4147.125 linux #0-0]
    [Chrome 84.0.4147.125 linux #0-0] first-draft
    [Chrome 84.0.4147.125 linux #0-0]    ✓ redirect to a random draft
    [Chrome 84.0.4147.125 linux #0-0]    ✓ requests the draft
    [Chrome 84.0.4147.125 linux #0-0]
    [Chrome 84.0.4147.125 linux #0-0] 2 passing (2s)
    
    
    Spec Files:      1 passed, 1 total (100% completed) in 00:00:16

    Excited by the green ticks, I decided to get a little more complex and started on a test to test the pen tool.

    The test had to load a blank draft, select to pen tool and then click and drag to draw a line. Once the line was drawn, I then checked the events that had been emitted by the app to ensure they were as expected.

    The first pen tool tests
    import { asyncFind, blankDraft, getCoordinate } from '../helpers/utils';
    
    describe('first-draft pen tool', () => {
      it('becomes selected when clicked', async () => {
        await browser.url('/');
        await browser.execute(blankDraft);
        const toolbar = await $('#toolbar');
        expect(toolbar).toExist();
        const toolButton = await asyncFind(
          await toolbar.$$('button'),
          async (button) => (await button.getAttribute('title')) === 'Pen tool'
        );
        expect(toolButton).toExist();
    
        await toolButton.click();
        expect(toolButton).toHaveAttribute('aria-selected', 'true');
        const changeEvent = await browser.execute(() =>
          window['socketEvents'].sent.find(
            (event) => event.event === 'draft:changeTool'
          )
        );
    
        expect(changeEvent).toBeDefined();
        expect(changeEvent.data.tool).toEqual('pen');
      });
    
      it('draws a line with a mouse', async () => {
        await browser.execute(() => window['socketEvents'].clear());
    
        // Draw line
        const actions = [
          {
            type: 'pointer',
            id: 'mouse',
            parmeters: {
              pointerType: 'mouse'
            },
            actions: [
              { type: 'pointerMove', duration: 0, x: 20, y: 100 },
              { type: 'pointerDown', button: 0 },
              { type: 'pause', duration: 500 },
              {
                type: 'pointerMove',
                duration: 500,
                origin: 'pointer',
                x: 50,
                y: 50
              },
              { type: 'pause', duration: 500 },
              {
                type: 'pointerMove',
                duration: 500,
                origin: 'pointer',
                x: 50,
                y: 50
              },
              { type: 'pause', duration: 500 },
              { type: 'pointerUp', button: 0 },
              {
                type: 'pointerMove',
                duration: 500,
                origin: 'pointer',
                x: 50,
                y: 50
              },
              { type: 'pause', duration: 500 }
            ]
          }
        ];
    
        await browser.performActions(actions);
    
        const drawEvents = await browser.execute(() =>
          window['socketEvents'].sent.filter(
            (event) => event.event === 'draft:draw'
          )
        );
    
        const lastEvent = drawEvents.pop();
        const elementName = lastEvent.data.element.name;
    
        expect(lastEvent.data.element.type).toBe('Path');
        expect(lastEvent.data.active).toBe(false);
    
        for (let i = 0; i < drawEvents.length; i++) {
          expect(drawEvents[i].data.active).toBe(true);
          expect(drawEvents[i].data.element.name).toBe(elementName);
          expect(drawEvents[i].data.element.type).toBe('Path');
        }
    
        expect(lastEvent.data.element.segments.length).toBeLessThan(
          drawEvents[drawEvents.length - 1].data.element.segments.length
        );
    
        // Check didn't take in last pointer move
        const first = getCoordinate(lastEvent.data.element.segments, 0);
        const last = getCoordinate(lastEvent.data.element.segments, -1);
        expect(last[0] - first[0]).toBe(100);
        expect(last[1] - first[1]).toBe(100);
      });
    });

    I saved the test and ran the test runner again.

    For some reason it wasn't finding any events. I ran it again and looked to see if it was drawing a line on the canvas and it wasn't. Puzzled, I remembered having seen something that seemed to suggest that Chrome (the default browser) didn't currently support actions, so I tried switching to Firefox.

    [0-2]  Error:  Only Nightly release channel is supported in Devtools/Puppeteer for Firefox. Refer to the following issue:
            https://bugzilla.mozilla.org/show_bug.cgi?id=1606604
    
            You can use the following link to download Firefox Nightly edition:
            https://www.mozilla.org/en-US/firefox/channel/desktop/
    
            Adding the following binary capability in Firefox Options is mandatory to run with Nightly edition:
    
            'moz:firefoxOptions': {
                binary: '/path/to/firefox'
            }
    
            Note: "Nightly" as a term should be present in the "Firefox Application Name" across all OS's in binary path mentioned above for this to work.

    Drats. After downloading pointing the tests to use firefox nightly, I got successful test run.

    It turns out the giberish at the bottom of the error means you don't need to include the path to the binary option if a command like firefox-nightly exists (just needs to contain nightly).

    Running the Tests on Gitlab CI

    Having written and got the tests running, I now needed to commit them and get them running on Gitlab CI.

    Having found an article about getting webdriver running on gitlab CI, I added a similar job and script to my projects .gitlab-ci.com and package.json files.

    .gitlab-ci.yml addition

    ui-test:
       stage: test
       image: node:lts-alpine
       services:
         - name: selenium/standalone-firefox
           alias: selenium
       before_script:
         - yarn
       script:
         - yarn run test:ui --host=selenium

    package.json addition

      "scripts": {
        "test:ui": "NODE_ENV=test npx wdio",

    Commiting and pushing I was greeted with same need Firefox Nightly error. Noooooooo.

    After a bunch of trial and error, including building custom versions of the standalone-firefox docker image, I found, by running npx wdio run --help, that the --host argument used to select the driver host should have actually been --hostname.

    Fixing the config files and pushing to gitlab, I finally got the tests passing.

    Success.

    Other Gotchas

    While WebdriverIO is incredibly powerful, it can be quite finicky to get right. Below are some of issues I have had so far.

    Actions Not Running

    Mouse interactions seem to be very flakey unless you give them a lot of time to run (by specifying duration values that would be expected if a user was actually doing the tests). My problems with Chrome not running my actions in the first tests I wrote was actually caused by this. Changing the action (pointerDown, pointerMove etc) times to 1000ms and adding 500ms pauses between the actions solved this issue.

    Returning Complex Objects

    If try to return data when using browser.execute that can't be JSON.stringifyed, the test execution will fail. This can be avoided cleaning objects before returning them, for example returning only the properties that you need.

    Failing Tests Due to Still Loading

    If you are loading things such as images after the page has loaded and trying to test things that should happen after those things have loaded, you need to wait for those things to load. On testing the initial pan/zoom ws working correctly, the tests ran fine on my local machine, but always failed running on the Gitlab runner. Adding a large pause using browser.pause before the tests proved that it was an loading issue. I ended up adding the emitting of a ready event once all the images had loaded.

    Close
  • 8/16/2020, 7:04:44 PM

    Hooray! My new blog is live! Based on Sapper, using MongoDB and eventually ActivityPub and ActivityStreams, it will be my federated posting hub to the world.

    softwareblog
  • 8/9/2020, 5:40:49 PM

    Removing EXIF Data from Photos

    exifphotos

    Creating this new blog, I wanted to make sure there was no metadata data leaking personal information. Here's how I removed all the metadata tags except the ones I wanted from my photos.

  • 8/9/2020, 10:21:41 AM

    tmux List and Reattach

    tmuxbashsoftware

    Using tmux for your terminal multiplexer but want an easy to reattach to a session? Here's a small bash script to do it.

  • 8/8/2020, 2:58:48 PM

    Selectable Shell Examples

    markdownsyntaxcss

    Here's how to help your readers save time by making your post's shell commands easy to select and copy - with a simple CSS property.

  • 8/5/2020, 6:48:38 PM

    Be Dates You

    mongodbdocker

    Making my new blog, I didn't initially set the published dates to be native dates in the database. Here what I did to change them ...and do all the upgrades I needed.

  • 7/8/2020, 4:00:00 PM

    Testing vue components

    softwarevuetestingjavascript

    I recently needed to test that some Vue components were creating the correct HTML. To do this, I decided to create snapshots of Object representations of the rendered HTML.

  • 2/20/2019, 12:00:00 AM

    No More Numbers

    javascripthtml5software

    HTML5 number inputs aren't useful, but tel inputs, have all the power

  • 12/21/2018, 12:00:00 AM

    A Hacker "Hacked" Me

    securityemailgrep

    I decided to look into the extortion emails I have been getting and wrote a small script to extract the bitcoin addresses that have been used.

  • 12/7/2018, 12:00:00 AM

    Mouse Surgery

    pledge to not upgradeelectronics

    As part of my pledge not to upgrade, I decided to repair two of my failing mice instead of replacing them with a brand new model (as tempting as it was). Here's what I did.

  • 10/29/2018, 7:00:00 PM

    Danger Danger, Highly Reactive

    vuereactivegraphingdata
  • 9/11/2018, 7:00:00 AM

    Switching to SSR

    reactssrreact-loader
  • 8/10/2018, 4:00:00 PM

    Clean Docker Registry

    nodedockerconsolejavascript
  • 2/1/2018, 12:00:00 AM

    Testing on the Filesystem

    testingjavascript
  • 1/26/2018, 12:00:00 AM

    Tag You Are

    javascripttags
  • 1/25/2018, 9:00:00 PM

    NaN Got Me

    rubber duck savejavascriptnodejsjson
  • 4/28/2017, 10:25:34 AM

    All our app's tabs are belong to us

    angularjavascriptlocalstoragerxjssessionstorage
  • 2/20/2016, 2:33:19 AM

    Developing NPM modules

    nodejsnpm
  • 2/20/2016, 1:48:13 AM

    Nfa + Nfb or N(f+fa+fb)

    arrayfunctionjavascriptjsperf
  • 10/31/2015, 3:36:29 PM

    Photo Layout

    arrangercssgallery hierarchyhtmljavascriptphotostinymcewordpresssoftware
  • 10/31/2015, 2:33:49 PM

    Browning Pass HideAway Web Site

    cssgallery hierarchyhtmlwordpress
  • 10/17/2015, 4:04:57 PM

    Think Mobile

    mobileweb
  • 10/13/2015, 9:30:59 AM

    Pledge to Refuse and Not Buy Bottled Water

    environmentpledges
  • 2/25/2015, 7:42:33 AM

    Run PHP run!

    maximum execution timephptrial and error
  • 11/26/2014, 6:35:32 AM

    Gallery Hierarchy

    galleryhierarchyphotos
  • 10/3/2014, 7:22:04 AM

    Vim and functions

    functionnavigationtagsvim
  • 9/26/2014, 3:18:53 AM

    I'm making hierarchies

    hierarchical datahierarchyphp
  • 9/4/2014, 1:45:18 PM

    Google Sheets fun

    googlegoogle scriptgoogle sheetsjavascriptsheets
  • 8/13/2014, 3:14:22 AM

    Travel Photos

    photo managementphotostravel photos
  • 8/13/2014, 3:02:22 AM

    Image managment scripts

    photo managementphotos
  • 7/31/2014, 3:43:45 PM

    MeldCE logo

    csshtml5javascriptsvg
  • 4/26/2014, 6:34:09 AM

    MoltenDB

    databasemoltendbmongodbnodejs
  • 10/29/2013, 12:09:07 AM

    The Expensive Side

    house
  • 9/22/2013, 7:00:08 PM

    abcde

    music
  • 7/16/2013, 8:26:10 PM

    Energizer Power Plus Rechargeable Batteries

    gadgets
  • 3/4/2013, 6:27:40 PM

    USAR FOGTeX

    fogtex
  • 2/21/2013, 9:09:54 PM

    Personal Gear Bag

    rescuegear
  • 2/18/2013, 11:10:34 PM

    Geocaching Stamp

    stampgeocaching
  • 4/2/2007, 3:50:02 PM

    Call Record Presenter

    parserpythonsqliteweb
  • 9/25/2004, 9:48:10 AM

    Kimi Ora School

    csshtml
  • 6/25/2004, 8:53:53 AM

    All About Catering Web Site

    csshtml
  • 7/26/2003, 7:52:11 AM

    Quantum Accounting Web Site

    csshtml
Copyright BytesNZ 2021. Powered by Sapper
[matrix]