Installation & Configuration

node --version  # v18.0.0 or higher

mkdir wdio-saucedemo
cd wdio-saucedemo
npm init -y
npm init wdio@latest .

What type of testing would you like to do?
  → E2E Testing - of Web or Mobile Applications

Where is your automation backend located?
  → On my local machine

Which environment you would like to automate?
  → Web - web applications in the browser

With which browser should we start?
  → Chrome

Which framework do you want to use?
  → Mocha

Do you want to use a compiler?
  → TypeScript (recommended)

Do you want WebdriverIO to autogenerate some test files?
  → Yes

What is the base url?
  → https://www.saucedemo.com

Do you want me to run npm install for you?
  → Yes

wdio-saucedemo/
  test/
    specs/
      example.e2e.ts   ← example test file
  wdio.conf.ts         ← main configuration
  tsconfig.json        ← TypeScript config
  package.json

export const config: Options.Testrunner = {
  // Base URL — used with browser.url('/')
  baseUrl: 'https://www.saucedemo.com',

  // Test files to run
  specs: ['./test/specs/**/*.ts'],

  // How many browsers to run in parallel
  maxInstances: 5,

  // Browser capabilities
  capabilities: [{
    browserName: 'chrome',
    'goog:chromeOptions': {
      args: ['--headless']  // remove this for headed mode
    }
  }],

  // Test framework
  framework: 'mocha',
  mochaOpts: {
    timeout: 60000  // 60s timeout per test
  },

  // Automatic waiting
  waitforTimeout: 5000,  // how long to wait for elements

  // Retry failed tests
  bail: 0,  // 0 = don't stop on failure

  // Reporter
  reporters: ['spec'],
}

describe('SauceDemo Login', () => {
  it('should login with valid credentials', async () => {
    await browser.url('/')

    await $('#user-name').setValue('standard_user')
    await $('#password').setValue('secret_sauce')
    await $('#login-button').click()

    await expect(browser).toHaveUrl(expect.stringContaining('/inventory'))
    await expect($('.inventory_list')).toBeDisplayed()
  })

  it('should show error for invalid credentials', async () => {
    await browser.url('/')

    await $('#user-name').setValue('wrong_user')
    await $('#password').setValue('wrong_pass')
    await $('#login-button').click()

    const errorMessage = await $('[data-test="error"]')
    await expect(errorMessage).toBeDisplayed()
    await expect(errorMessage).toHaveText(
      expect.stringContaining('Username and password do not match')
    )
  })
})

npx wdio run wdio.conf.ts

[chrome 120.0.0.0 / linux] Running: 2 tests
✓ SauceDemo Login should login with valid credentials (1.2s)
✓ SauceDemo Login should show error for invalid credentials (0.9s)

2 passing (2.3s)

capabilities: [{
  browserName: 'chrome',
  // no args — browser opens visibly
}],

capabilities: [{
  browserName: 'chrome',
  'goog:chromeOptions': {
    args: ['--headless', '--disable-gpu']
  }
}],

npx wdio run wdio.conf.ts --headless

npx wdio run wdio.conf.ts --spec test/specs/login.e2e.ts

capabilities: [
  { browserName: 'chrome' },
  { browserName: 'firefox' },
],
maxInstances: 2,

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@pages/*": ["test/pages/*"],
      "@data/*": ["test/data/*"]
    }
  }
}

// Add to config:
mochaOpts: {
  require: ['ts-node/register', 'tsconfig-paths/register'],
},

it('should debug', async () => {
  await browser.url('/')
  await browser.debug()  // pauses here, opens interactive REPL
  // type browser commands in the terminal
})

{
  "type": "node",
  "request": "launch",
  "name": "WDIO Debug",
  "program": "${workspaceFolder}/node_modules/.bin/wdio",
  "args": ["run", "wdio.conf.ts"],
  "console": "integratedTerminal"
}