klamping

Tests need to be reliable most of all, and easy to debug second of all. An unreliable test is an absolute pain.

Optimize tests for readability and debugging

• That's where you'll spend the majority of your time (and frustration)- Your tests should not make you think
• Test failures will happen at the worst time. Don't make it even more stressful

---

Prefer hard-coded values in assertions, versus dynamic content

klamping

• Weird nature of Cypress promises that aren't promises, are sometimes chained, and sometimes uses .then
  • Inability to use await/async
• Inability to use standard variables
  • Getting values from the page is a pain
    • Getting a URL
    • const href = await $('a').getAttribute('href');
    • cy.get('a') .invoke('attr', 'href') .should('eq', 'https://docs.cypress.io') But not really because we can't use that elsewhere so need a better example

klamping

What makes UI Testing complicated

• Flaky data
  • Makes debugging incredibly tough when tests pass intermittently
  • Mocking exists, but it's tricky to implement because most data is server-side and you may not have access to that (even if you can change it, it's technically complex)
    • Integrating Server-side Mocking into CICD is complex
• Loose-coupling between HTML and Selectors (leading to false failing tests/maintanence nightmares)
• You either have tests that don't prove anything, or tests that are always breaking
  • 3rd-party services that you need to mock, but also need to validate work
  • How do you prove that the right value was returned without either mocking it out or tight-coupling with the API/DB?
• All the environments in the world

klamping

try
	set getClip to the clipboard as text
on error
	set getClip to " "
end try

tell application "System Events"
	repeat with i from 1 to count characters of getClip
		keystroke (character i of getClip)
		delay (random number from 0.02 to 0.05)

klamping

javascript:void function()%7Bconst e%3DMath.round(document.documentElement.scrollTop),o%3Ddocument.createElement("textarea")%3Bo.value%3De,document.body.appendChild(o),o.select(),document.execCommand("copy"),document.body.removeChild(o)%7D()%3B

klamping

function runTest (options) {
    browser.url(options.siteUrl);

    options.inputs.forEach(input => {
        $(input.selector).setValue(input.value);
    });

    $(options.submitSelector).click();
}

klamping

version: '3'
services:
  web:
    container_name: realworld-web
    restart: always
    image: klamping/realworld-web
    environment:
      - APIURL=local
    ports:
      - "8080:8080"

klamping

{
  "name": "webdriverio-course-content",
  "version": "1.0.0",
  "description": "WebdriverIO Course Content (examples, exercises and sample site)",
  "main": "index.js",
  "scripts": {
    "start": "http-server sample-site -p 8303",
    "test": "npm test",
    "ghPages": "gh-pages -d sample-site",
    "selser": "selenium-standalone"

klamping

WDIO Testing Best Practices

• Use page objects
• avoid protocol methods and prefer commands
• don't use timeouts unless you have a good reason
• use waitFor, waitForVisible etc
• avoid caching elements
• avoid arbitrary pause() calls
• use mocks

Protocol commands

klamping

const executeTest = require('./executeTest.js');

const dbSettings = {};
const db = new Database(dbSettings);
await db.init();

function initTest (userId, projectId, command, opts) {
  const testRun = db.createTestrun(userId, {
    projectId
    command,