Python Lab #3 ― Selenium Web テスト自動化

過去に Web 画面（React、Vue の 2種類の画面）を開発しました。

今回、Selenium を使って自動的に Web 画面（React、Vue の 2種類の画面）を操作するという開発をしてみました。
簡単なリグレッションテストとして使えそうです。
ブラウザー（Chrome）をインストールせず、Selenium 内包のブラウザー（Chrome for Testing）を使用しました。便利ですねー。

テストシナリオ

1. [ログイン] 画面にて、何度かの入力ミスによるログイン失敗ののち、ログインに成功し [ホーム] 画面に飛ぶ。
2. [ホーム] 画面 のタブを使って、[セッティング] 画面に飛んで、[ホーム] 画面に飛ぶ。
3. [ホーム] 画面にて、ログアウトして [ログイン] 画面に飛ぶ。

[React、React-Bootstrap]

[Vue、Vuetify]

テスト対象画面のソースコードの簡単な説明

• ログイン画面（ほんの一部分）。
  FlaskLogin.tsx

  ・・・
    return (
      <>
        ・・・
        <main style={styles.margin}>
          <h5>Login</h5>
          <Container fluid="true">
            <Row noGutters="true">
              <Col>{message}</Col>
            </Row>
            <Row noGutters="true">
              <Col xs={12} md={4}>
                <Form.Control type="text" value={userName} id="userName" placeholder="User Name" onChange={(e) => setUserName(e.target.value)} /> ← ★
              </Col>
            </Row>
            <Row noGutters="true">
              <Col xs={12} md={4}>
                <Form.Control type="password" value={password} id="password" placeholder="Password" onChange={(e) => setPassword(e.target.value)} /> ← ★
              </Col>
            </Row>
            <Row noGutters="true">
              <Col md="auto">
                <Button variant="outline-success" id="login" onClick={login}>Login</Button> ← ★
              </Col>
            </Row>
          </Container>
        </main>
      </>
    );
  ・・・
  

  Selenium で画面パーツ（<input>、<button> などに相当するもの）を指定しやすくするために、各画面パーツには “id=” で ID を指定する。
• ブラウザーでテスト対象画面を開いて [F12] キーで DevTools を開いて HTML の内容を参照し、正しく ID が指定されていることを確認する。

Python ソースコードの簡単な説明

• 自動テスト処理。React と Vue で共通のソースコードとなる。
  auto_tester.py

  #!/usr/bin/env python3
  
  ・・・
  
  # Import Libraries
  import sys
  import time
  from selenium import webdriver
  from selenium.webdriver.common.by import By
  from selenium.webdriver.common.keys import Keys
  from selenium.webdriver.chrome.options import Options
  
  # Constants
  SLEEP_SECONDS = 2
  URL = 'http://localhost:8080'
  CMD_FILL = 1
  CMD_CLEAR = 2
  CMD_CLICK = 3
  CMDS = [
      [CMD_CLICK, 'login'],
      [CMD_FILL, 'userName', 'root'],
      [CMD_CLICK, 'login'],
      [CMD_FILL, 'password', 'asdf1234'],
      [CMD_CLICK, 'login'],
      [CMD_CLEAR, 'password'],
      [CMD_FILL, 'password', 'Asdf1234'],
      [CMD_CLICK, 'login'],
      [CMD_CLICK, 'settings'],
      [CMD_CLICK, 'home'],
      [CMD_CLICK, 'logout'],
  ]
  
  
  # Main
  def main() -> None:
  
      # browser
      options = Options()
      options.add_experimental_option("detach", True)
      driver = webdriver.Chrome(options=options)
  #    driver.maximize_window()
      driver.get(URL)
  
      # processes
      for cmd in CMDS:
          time.sleep(SLEEP_SECONDS)
          if cmd[0] == CMD_FILL:
              html_textbox = driver.find_element(By.ID, str(cmd[1]))
              html_textbox.send_keys(str(cmd[2]))
          elif cmd[0] == CMD_CLEAR:
              html_textbox = driver.find_element(By.ID, str(cmd[1]))
              html_textbox.send_keys(Keys.CONTROL + "a")
              html_textbox.send_keys(Keys.DELETE)
          elif cmd[0] == CMD_CLICK:
              html_button = driver.find_element(By.ID, str(cmd[1]))
              html_button.click()
          else:
              print('Invalid command : %s' % cmd[0], file=sys.stderr)
              raise Exception('Invalid command.')
  
      # end
      time.sleep(SLEEP_SECONDS)
      driver.quit()
      sys.exit(0)
  
  
  # Goto Main
  if __name__ == '__main__':
      main()
  

  配列の値（コンマ区切りデータ：動作, 画面パーツ ID ［, テキストボックス文字列］）に従って、画面パーツのテキストボックスに文字列を設定したりボタンを押下したりする。

全ソースコードの置き場所

参考

Selenium 使用方法

Selenium チュートリアル

Selenium 内包ブラウザー（Chrome for Testing）