重要なのは諦めないこと|Seleniumに半角カナを入力させる

  • 2017年5月12日
  • by 
重要なのは諦めないこと|Seleniumに半角カナを入力させる

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

こんにちは、M.Sです。
先日、Seleniumでバリデートチェックツールを作成しました。

今回はその時に出くわした「半角カタカナにまつわる不可解な事象と解決策」をご紹介します。

ツール作成の目的

それでは、なぜバリデートチェックツールが必要なのか、その経緯についてご説明します。

ショーケース・ティービーが展開するWebサービス「フォームアシスト」はお客様は対象フォームのページにタグを貼っていただくだけの “カンタン導入” をウリにしたサービスなのですが、受注を戴いた際には社内で設定作業が発生します。

作業というのは対象フォーム自体の制御自体を手作業で確認しているのです。
大まかに言うと以下の3点を確認しています。
・必須制御ある(入力せずには次ページ遷移できない)項目の有無確認
・入力項目のバリデート(入力可能なテキストの特定)の確認
・入力項目の文字数制限の確認

今回Seleniumでバリデートチェックツールを必要としたのは、これらの確認作業を自動化し、生産性を向上させることを目的としました。
設定を行うフォームによって、プログラムの一部は変更する必要が生じることにはなるでしょうが、ひとまず作ってみることに。

ツールの機能とロジック

ツールの機能は3つ。いろいろ欲張りたくもなりますが、まずは3つの機能実装を必達とし、取得した情報をテキストファイルとして出力する仕様としました。

機能1『必須項目を特定する』
<ロジック>
何も入力せず、サブミットボタンをクリック。必須項目が未入力であることのエラーメッセージが表示された場合、そのエラーメッセージのテキスト情報から必須項目を特定する。

機能2『文字数制限を特定する』
<ロジック>
「maxlength」が存在する場合、その項目のname値を取得し項目を特定。また、該当name値の「maxlength」の値を取得することで、最大入力文字数を特定する。

機能3『各入力項目ごとの入力可能なテキストを特定する』
<ロジック>
すべての「input」タグの中からテキストが入力可能な「input」のtype属性を取得。なお、「input type=”radio”」はテキストが入力できないので除外とする。
これにより、入力項目ごとに許容しないテキストを入力した際に表示されるエラーメッセージを取得し、エラーメッセージの中からエラーかどうかを判別するために必要な文字列のみを抽出する。テキストを入力してサブミットした際に、抽出した文字列がエラーメッセージの中に含まれればエラー、含まれなければエラーではないと判別する。

特に「機能3」は少し複雑ですので、少し具体例を交えてご説明しましょう。
例えば、全角文字のみを許容するname値「firstname」があったとします。この項目に半角文字を入力し、その後サブミットした際に「氏名(姓)に半角文字が含まれています」とエラーメッセージが表示されたとしましょう。
この場合、name値「firstname」は全角文字以外は許容しないと判別するために「氏名(姓)」の文字列のみを抽出します。半角文字を入力しサブミットした際、エラーメッセージの中に「氏名(姓)」が含まれていればエラー、含まれなければエラーではないと判別します。

なお、入力するテキストは以下のように、それなりのバリエーションをもたせることが重要です。
<全角の文字列の場合>
ひらがな、カタカナ、小文字アルファベット、大文字アルファベット、数字、色々な記号(例えば@)、スペース、中黒(・)
<半角の文字列の場合>
カタカナ、小文字アルファベット、大文字アルファベット、色々な記号(例えば@)、スペース、中黒(・)

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ

仮想環境で『Ansible』を使ってサーバ構築... 最近、サーバ構築を実施する必要がありました。 まずは仮想環境を作り、サーバ構築を……と思ったのですが、私はインフラ周りの経験が浅く、色々困ったことが頻出してしまいました。 今回の記事では、私と同じような “サーバ構築ビギナー” ...
「Puppeteer」+「LINE Notify」でサイトの更新時のみ通知を受け取ってみる... 前回の記事では閲覧数向上が期待できそうなキーワードの「Puppeteer」と「LINE Notify」のそれぞれの解説、およびサイトのサムネイルを通知してみるといった試みを実施してみました。 <bitWave関連記事『「Puppeteer...
Vue.jsで社用登録データフォームを作ってみた... 今回は社内用データ登録フォームを作ろうと思い、初めて「Vue.js」を試してみることにしました。 「Vue.js」は使い方、書き方も簡単で、初心者もすぐ活用できるjsだと思いましたので、この場を借りて共有させていただきます。 なお、...
「Puppeteer」+「LINE Notify」でサイトのサムネイルを通知してみる... 今回は記事閲覧数が期待できそうなキーワードを用いて、ブログを書いてみようかと思います。 そのキーワードとは…… 「Puppeteer」と「LINE Notify」。 「Puppeteer」って何? 「LINE Notify」って...