Zenn
Bitkey DevelopersPublicationへの投稿
🐙

mablで必要なローコードの知識4選

Roku Mikami_bitkey
2024/07/19に公開
mabl
tech

はじめに

私は現在株式会社ビットキーにてE2Eテスト自動化エンジニアとしてテスト業務を行っています。

テスト自動化というと少し前までは0から環境構築して自動テスト用のコードを書き上げて・・・と専門知識を持った方が主導して取り組むことが多かったのではないでしょうか。

ですが昨今ではAutify, MagicPod, mablをはじめとした直感的な操作でテスト自動化を実現できるツールの登場により、ローコード・ノーコードでのテスト自動化が盛んになっている印象です。

弊社のテストエンジニアもより手軽にテストの自動化が行えるように、2023年1月からからmablというツールを採用しリグレッションテストをはじめとしたテストの自動化に取り組んでおります。

本記事ではローコードに不慣れな方が最初の一歩を踏み出せるように、ローコード・ノーコードのE2Eテスト自動化ツールを用いてWebアプリケーションのE2Eテストを自動化する際に必要とされるであろうローコードの知識を独断と偏見で紹介いたします。

※弊社で利用しているE2Eテスト自動化ツールはmabl一本になります。そのため一定偏った知識になることはご了承いただけると幸いです

対象読者

  • ローコード・ノーコードのE2Eテスト自動化ツールを使っている方で、ローコードにまだ触れたことがない方またはローコードに関しての学習にハードルを感じている方

この記事を読むことによる価値

  • ローコード・ノーコードのE2Eテスト自動化ツールにおいて必要なコーディングの知識を知ることができ、具体的な学習目標を立てて知識のインプットを行うことができるようになる

前置き

本記事は下記形式で各知識を紹介いたします。

  • 概要
  • 利用する場面
  • mablで使用する機能
  • 押さえておきたい知識

また下記内容は取り扱いません。ご承知おきください。

  • モバイルアプリケーションでの検証においても利用できるかどうか
  • mablでの具体的な操作例
  • 各知識の実践的な活用方法

🔹ローコード導入の背景

弊社で利用しているmablはローコード・ノーコードでテスト自動化を行うことができることを特徴の1つとするツールです。

コーディングやプログラミングに関する知識を持つことは必ずしも必要とはされていません。

実際に弊社でmablを利用してリグレッションテストの自動化を進めたところ、着手した半分以上のテストはノーコードで自動化を行うことができました。

また、このとき自動化に着手したメンバーは非開発エンジニアであり、かつコーディングに関する知識や勉強歴はほとんどありませんでした。

そういったチーム体制であっても、ノーコードの特徴を活かしたことでテスト自動化の作業はほとんど滞らずに進めることができ、結果として約1年で毎月46時間分の手動テスト工数を削減することに成功しました。

※こう書くととても宣伝チックですが、取り組んでから1年で得た成果に関して詳細を知りたい方はこちらからどうぞ
【Developers Summit 2024】自動テスト歴0年でもできる！ ～1年目で得られた成果と展望～

ただ、ノーコードだと安定性を欠き失敗しやすかったり（例：ほしい要素を取ってきてくれない）、
そもそもノーコードだけだとテストができない（例：動的な日付のアサーションを行いたい）というテストにしばしば遭遇することがありました。

はじめは単にツールの知識が足りないだけかと考えていましたが、調査したところローコードを使用しないと自動化できない種類のテストであるということが判明しました。

自動化できるテストを増やすためにローコードを導入しようとなった際、先述した通りコーディングに関するバックグラウンドを持ったメンバーが少なかったため、

  • 何から勉強すれば良いのか
  • どこまで勉強すれば良いのか
  • どこで使えば良いのか
  • いつ使えば良いのか

とわからないことだらけでした。

ローコードが必要なテストが少ないのであればわざわざ学習コストを割いて注力する必要はありません。
しかし結果的に弊社で実際にテスト自動化を行った中で約30~40%のテストケースにおいてローコードを利用しています。

決して学習コストが低くないローコードですが、自動化できるテストの範囲を拡大してくれる武器であることは事実です。

ローコードを必要としている方がはじめの1歩を踏み出すお手伝いを本記事で行うことができれば非常に嬉しく思います。

◾️普段よく扱うローコードを紹介

ということでmablでE2Eテストを自動化する過程でよく扱うローコードを紹介します。

結論はこの4つです。

これらは2つのカテゴリーに大きく区分することができます。

正確なアサーションを行うために利用

  • HTML
  • XPath

文章のフォーマットを変えたり、日付や計算結果の取得、または条件分岐を行う際に利用

  • JavaScript
  • 正規表現

この2つの用途に応じてそれぞれの知識を使用する形になります。
頭の隅に留めて読み進めていただけると幸いです。

また上記の知識に関しては各知識で依存関係があります。

  • HTML
    • XPathを利用する際に必須となる知識
  • JavaScript
    • 正規表現を使用する際に必要。ただしツールの種類によっては別の言語を扱う場合がある

そのため学習する際は、

  • HTML→XPath
  • JavaScript→正規表現

上記の区分かつ順番で学習することをおすすめします。

HTML / XPathの知識はJavaScript / 正規表現に比べて学習コストは高くないので迷ったらHTMLから勉強することをおすすめします。

それでは1つずつ見ていきましょう。

HTML (Hyper Text Markup Language)

  • 概要
    • Webページを作成する際に使用するマークアップ言語です
      • あなたがまさに今見ているこの文章を表示させるために使われています
      • マークアップ言語とは、Webページに表示させたいテキストや図形、画像などの部品情報をコンピュータに伝えるために使用する言語です
        • マークアップ言語の種類はHTMLの他にXML、XHTML、SGMLなどがあります
        • 現在のウェブサイトの多くで使われているマークアップ言語はHTMLです
  • 利用する場面
    • ①XPathを使用してHTML要素を操作、検索する際に利用
      • HTML要素はHTMLを記述する際に利用される部品です。タグ名だったり、属性だったり、テキスト要素だったりなどそれぞれ異なる役割をもっています
        • HTML要素の例
          • タグ
            • タグ内の要素の表示方法を指定するために使われる

              ▼画像内の紫色の文字列がタグ
          • 属性
            • HTML要素がどういった種類の情報かを区別するために使われる

              ▼画像内のオレンジ色の文字列が属性。”=”で接続された右側の文字列が属性値
          • テキスト要素
            • 画面上に表示させるための文字列になる

              ▼画像内の黒色の文字列がテキスト要素。タグに囲まれることもあれば、囲まれないこともある
      • Webアプリケーションの場合、XPathを使用する際にWebページのソースコードを読み、どの要素に対して。つまりHTMLを読めるようになっておく必要があります

        ▼画面右側にHTML要素が示されている。これらのHTML要素を部分的に理解できる必要がある
    • ②JavaScriptを使用して特定の要素を操作、検索する
      • HTML要素に対して操作を行ったり、情報を取得する際に利用することがあります
      • 上記はXPathでも実現可能ですがWebページの構造によってXPathが利用できない場合があるので代替手段として使うことがあります
        • こちらは学習コストが一定高いため、必要に応じての学習をおすすめします
  • mablで使用する機能
  • おすすめの学習サイト
    • HTML の基本
      • 想定学習時間
        • ~30分
      • ポイント
        • MDN Web Docsが公開している無料のリソースです
        • mablで使用する際はこのページに記載してある内容を理解できればXPath用にすぐに使いはじめることができると思います
  • 押さえておきたい知識
    • HTML文書の構造
    • HTMLタグ
    • 属性、属性値

XPath (XML Path Language)

  • 概要
    • 元々はXML文書内の特定の要素や情報を見つけるために使用されていた言語ですが、HTML文書に対しても使用することができます
    • XPathを使用することで操作を行いたい要素の情報を詳細に指定することができます
  • 利用する場面
    • 操作対象となる要素と類似した要素が同じ画面内にある
      • 類似した要素が画面上にある場合、テスト自動化ツールに標準搭載されていることが多い録画機能を使用して検証すると実行時に正しく意図した要素を選択できないことがしばしばあります
        • これは録画機能で録画したままのテストコードだと「類似した要素も検出対象とする」という挙動を行うためだと思われます
          • 類似要素を検出してくれるということはメンテナンスの手間を一定抑えることができるというメリットがあるため場面によって使い分けが必要です
      • XPathを利用することで各要素が持つ一意の値を指定するといったことができるようになります
      • 例：「テスト駆動開発という単語を含む」という指定方法だと「受け入れテスト駆動開発」も引っかかってしまう
        *録画機能での再現が難しいためXPathで比較しています
        • そのため「テスト駆動開発という単語と一致する」という指定方法に変更
    • 画面上の要素の数をカウントしたい
      • データの検索に関するテストを行う際、画面上に表示されている条件に該当するデータ数をテストすることがあります
      • こういった検証においてXPathを利用することで「特定のテキストを含む要素」「特定の属性を含む要素」をHTML文書から読み取りカウントすることが可能です
      • 例：画面上から「テストエンジニア」というテキスト要素を含む要素数をカウント
  • mablで使用する機能
  • おすすめの学習サイト
    • 便利なXPathまとめ
      • 学習に必要な時間
        • 30分~1時間
      • ZOZOTOWNを運営するZOZOが公開している記事です
      • XPathを使い始めるために必要な知識を初学者でも理解できるようにわかりやすく記載されているためおすすめです
  • 押さえておきたい知識
    • ロケーションパス
    • テキストの検索方法
    • 属性の検索方法
    • 完全一致検索
    • 部分一致検索
    • 兄弟要素の検索方法

JavaScript

  • 概要
    • HTMLとCSSと共にWeb開発の三大要素の一つとされており、ページ上の要素をリアルタイムで操作したり、ユーザーの入力に基づいて動的な変更を加えたりすることができます
  • 利用する場面
    • 現在日付の取得
      • Webアプリケーション上でデータを新規作成した際、データの作成日付が現在時刻に沿っているかテストを行います
      • 上記のテストを行う際に現在日付と画面上の日付の比較が必要になるため、JavaScriptで現在日付を取得し変数に保存します

        ▼現在日付をyyyy/mm/ddのフォーマットで取得するスニペット
    • 文書のフォーマット
      • 計算や検証で利用しやすくするために「yyyy年mm月dd日」→「yyyy/mm/dd」のようにフォーマットすることが可能です

        ▼文章中の指定した文言を空白に置換するスニペット
    • 特殊な検証
      • 「ソート機能利用後のデータの表示順の確認」、「複数の日付の新旧の比較」などにおいてJavaScriptを使用することで検証を行うことが可能です

        ▼2つの時刻を比較して真偽判定の結果を出力するスニペット
  • mablで使用する機能
  • おすすめの学習サイト
    • JavaScript Primer
      • 学習に必要な時間
        • 15h~20h
          ※ローコード・ノーコードのテスト自動化ツールを利用することに焦点を当てた場合（学習しておくと良いページは押さえておきたい知識に記載）
      • ポイント
        • JavaScriptに関して体系的な知識を学べるサイトです
        • ただし一定プログラミングに馴染みのあることを前提としています
        • 内容が少し理解しにくい場合は他の学習サイトも並行して見てみることをお勧めします
        • すべてを学習しようとすると多くの時間を必要とするため、学習しながら実際にツールで試してみて必要な知識を選定することをお勧めします
  • 押さえておきたい知識
    ※下記知識を「完全に」理解することは必須ではありません。詳細な使い方は必要だと思った時に使い方を検索することをおすすめします
    ※JavaScript Primerを利用した際の例になります
    • JavaScriptの基本構造
    • コードの評価とエラー
    • 変数
    • コメント
    • 文と式
    • リテラル
    • 演算子
    • ループと反復処理
    • オブジェクト
    • 配列
    • 文字列
    • 関数
    • 関数とスコープ
    • 条件分岐
    • Date
    • Math

正規表現 (Regular Expression)

  • 概要

    • 正規表現は特定のシンボルや文字列を組み合わせたパターンで、このパターンによって「何を検索するか」を定義します

  • 利用する場面

    • 文字列の検索、置換、抽出
      • 概要記載に記載の通り、「画面上から取得した文字列の中の特例の文字列を抽出する」であったり「半角スペースを”-”に変換する」など置換を行うことができます

  • mablで使用する機能

  • おすすめの学習サイト

    • 正規表現

      • 学習に必要な時間

        • ~12h

          ※ローコード・ノーコードのテスト自動化ツールを利用することに焦点を当てた場合（学習しておくと良いページは押さえておきたい知識に記載）

      • ポイント

        • MDN Web Docsが公開している無料のリソースです
        • すべてを学習しようとすると多くの時間を必要とするため、学習しながら実際にツールで試してみて必要な知識を選定することをお勧めします

  • 押さえておきたい知識

    • 正規表現パターンの記述
    • 単純なパターンの使い方
    • 特殊文字の使い方
    • エスケープ
    • 括弧の使用
    • フラグを用いた高度な検索

◾️まとめ

いかがだったでしょうか？

今回は実践的な活用事例の紹介は省きましたが、ローコードの知識を学習することでより柔軟な自動テストを作成できるようになります。

Bitkey Developers
Bitkey DevelopersPublication

Bitkeyに所属するエンジニアの個人記事を集めています。 記事内容はあくまでも個人の見解であり、会社としてレビュー等はしておりません。あらかじめご了承ください。

Discussion