본문으로 건너뛰기

selenium

sidebar_position: 2

Selenium

Example Application

This Selenium guide expects you to have already gone through the example Application setup to follow step-by-step. The general information may still be helpful otherwise.

This WebDriver testing example will use Selenium and a popular Node.js testing suite. You are expected to already have Node.js installed, along with npm or yarn although the finished example project uses yarn.

테스트를 위한 디렉토리 생성​

프로젝트에서 테스트를 작성할 공간을 만들어 봅시다. We will be using a nested directory for this example project as we will later also go over other frameworks, but typically you will only need to use one. mkdir -p webdriver/selenium를 사용하여 디렉토리를 생성할 것입니다. The rest of this guide will assume you are inside the webdriver/selenium directory.

Selenium 프로젝트 초기화 하기​

We will be using a pre-existing package.json to bootstrap this test suite because we have already chosen specific dependencies to use and want to showcase a simple working solution. The bottom of this section has a collapsed guide on how to set it up from scratch.

package.json:

{
  "name": "selenium",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "test": "mocha"
  },
  "dependencies": {
    "chai": "^4.3.4",
    "mocha": "^9.0.3",
    "selenium-webdriver": "^4.0.0-beta.4"
  }
}

We have a script that runs Mocha as a test framework exposed as the test command. We also have various dependencies that we will be using to run the tests. Mocha as the testing framework, Chai as the assertion library, and selenium-webdriver which is the Node.js Selenium package.

Click me if you want to see how to set a project up from scratch

If you want to install the dependencies from scratch, just run the following command.

yarn add mocha chai selenium-webdriver

I suggest also adding a "test": "mocha" item in the package.json "scripts" key so that running Mocha can be called simply with

yarn test

테스트​

Unlike the WebdriverIO Test Suite, Selenium does not come out of the box with a Test Suite and leaves it up to the developer to build those out. We chose Mocha, which is pretty neutral and not related to WebDrivers, so our script will need to do a bit of work to set up everything for us in the correct order. Mocha expects a testing file at test/test.js by default, so let's create that file now.

test/test.js:

const os = require('os')
const path = require('path')
const { expect } = require('chai')
const { spawn, spawnSync } = require('child_process')
const { Builder, By, Capabilities } = require('selenium-webdriver')

// create the path to the expected application binary
const application = path.resolve(
  __dirname,
  '..',
  '..',
  '..',
  'target',
  'release',
  'hello-tauri-webdriver'
)

// keep track of the webdriver instance we create
let driver

// keep track of the tauri-driver process we start
let tauriDriver

before(async function () {
  // set timeout to 2 minutes to allow the program to build if it needs to
  this.timeout(120000)

  // ensure the program has been built
  spawnSync('cargo', ['build', '--release'])

  // start tauri-driver
  tauriDriver = spawn(
    path.resolve(os.homedir(), '.cargo', 'bin', 'tauri-driver'),
    [],
    { stdio: [null, process.stdout, process.stderr] }
  )

  const capabilities = new Capabilities()
  capabilities.set('tauri:options', { application })
  capabilities.setBrowserName('wry')

  // start the webdriver client
  driver = await new Builder()
    .withCapabilities(capabilities)
    .usingServer('http://localhost:4444/')
    .build()
})

after(async function () {
  // stop the webdriver session
  await driver.quit()

  // kill the tauri-driver process
  tauriDriver.kill()
})

describe('Hello Tauri', () => {
  it('should be cordial', async () => {
    const text = await driver.findElement(By.css('body > h1')).getText()
    expect(text).to.match(/^[hH]ello/)
  })

  it('should be excited', async () => {
    const text = await driver.findElement(By.css('body > h1')).getText()
    expect(text).to.match(/!$/)
  })

  it('should be easy on the eyes', async () => {
    // selenium returns color css values as rgb(r, g, b)
    const text = await driver
      .findElement(By.css('body'))
      .getCssValue('background-color')

    const rgb = text.match(/^rgb\((?<r>\d+), (?<g>\d+), (?<b>\d+)\)$/).groups
    expect(rgb).to.have.all.keys('r', 'g', 'b')

    const luma = 0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b
    expect(luma).to.be.lessThan(100)
  })
})

If you are familiar with JS testing frameworks, describe, it, and expect should look familiar. We also have semi-complex before() and after() callbacks to set up and teardown mocha. Lines that are not the tests themselves have comments explaining the setup and teardown code. If you were familiar with the Spec file from the WebdriverIO example, you notice a lot more code that isn't tests, as we have to set up a few more WebDriver related items.

테스트 모음 실행하기​

Now that we are all set up with our dependencies and our test script, let's run it!

yarn test

출력 결과는 다음과 같아야 합니다:

➜  selenium git:(main) ✗ yarn test
yarn run v1.22.11
$ Mocha


  Hello Tauri
    ✔ should be cordial (120ms)
    ✔ should be excited
    ✔ should be easy on the eyes


  3 passing (588ms)

Done in 0.93s.

We can see that our Hello Tauri test suite we created with describe had all 3 items we created with it pass their tests!

With Selenium and some hooking up to a test suite, we just enabled e2e testing without modifying our Tauri application at all!