皆さん、こんばんは。
今回は、Webブラウザでの要素取得、クリック、テキスト入力操作についてご紹介したいと思います。
前回に引き続き、当ブログのテストページを使用して、ご紹介していきたいと思います。
当ブログテストページ
https://susakiworks.com/softwareesting/testpage/
また、今回は、Edge driverを利用して、各操作をご紹介したいと思います。
■記事内目次
・Edge Driver設定
・要素取得
・クリック
・テキスト入力
□Edge Driver
◇事前準備
・ipynbファイル作成
まずanacondaからJupyterLabを起動しましょう。
JupyterLab起動後、画面左上のFile＞New>Notebookから新規にipynbファイルを作成します。
その後、File>Rename Notebook…からファイル名を指定します。
今回は、「Jupyterlab_Web_Operation_Edge」とファイル名を指定しました。
・インポート
次に、以下を記述後、Shift+Enterで実行し、selenium,webdriver,timeを使用できるようにインポートします。
import selenium
from selenium import webdriver
import time
エラー等表示されなければ、問題なくインポートできていると思います。
以下のように「print」で実行結果を出して、視覚的にわかりやすくするのも、1つの手だと思います。
・Edge Driver設定
Edge Driverを使えるように設定します。
こちらについては、過去記事をご参照ください。
EdgeDriverを事前にダウンロードし、パスがわかっていっれば以下のように記述し、Shift＋Enterで実行起動させます。
#Edge Driver
edgedriver=webdriver.Edge(executable_path=”C:\\Users\sinsu\\WebDrivers\\EdgeDriver\\V89\\msedgedriver.exe”)
・ブラウザサイズ最大化
EdgeDriverを起動したら、表示内容がわかりやすいように、最大表示にしましょう。
#Edge Driver最大化
edgedriver.maximize_window()
time.sleep(3)
・テストページ遷移
テストページに遷移します。
表記は以下のように記述します。
「https://susakiworks.com/category/testpage/」を「Testpage」と変数指定し、getメソッドを使用してページ遷移します。
また、Printでページ遷移した旨がわかるように記載しています。
#テストページ遷移
Testpage = “https://susakiworks.com/category/testpage/”
edgedriver.get(Testpage)
time.sleep(3)
print(“テストページに遷移しました”)
以上で準備が整いました。
□要素取得
◇要素取得について
要素について、以前Katalon Recorderの紹介する際にご紹介した内容とほとんど同じとなります。
以下過去記事も併せてご確認頂ければと思います。
今回は、「Edge」ブラウザとなっていますので、「Edge」での要素の取得について、ご紹介していきたいと思います。
EdgeもChromeと同様、取得したい要素を右クリックから「開発者ツールで調査する」を選択します。
今回のWeb操作は、「TestPage01」ページを利用したいと思いますので、リンクテキストを右クリック⇒「開発者ツールで調査する」を選択します。
すると以下のように表示され、テキストリンクの要素を確認することができます。
◇Linkテキスト取得
リンクテキストの場合は、右側に表示された要素を右クリック⇒コピー⇒要素のコピーを選択します。
Jupyterlabのセル内に張り付けて確認します。
以下のテキスト部分を使用します。
Linkテキストの要素を取得する場合は、「find_element_by_link_text」を使用します。
今回は以下のように記述し、Shift+Enterで実行してみましょう。
#テストページリンクを取得
TestPage01 = edgedriver.find_element_by_link_text(“https://susakiworks.com/testwork/testpage/test_page_no1/”)
time.sleep(3)
print(“Testpage01のリンクを取得しました”)
Printで指定したテキストが表示されていればOKです。
・リンクページへ移動
リンクをクリックして、ページ遷移してみましょう。
クリックする場合は、「click」メソッドを使用します。
テストページのリンクは、「TestPage01」と変数で指定していますので、以下のように記述します。
#クリックしてページ遷移
TestPage01.click()
time.sleep(3)
print(“Testpage01へリンク遷移”)
Shift＋Enterで実行し、Testpage01に遷移できればOKです。
◇id取得
続いて、idで要素を取得します。
idも、Linkテキストと同様に、要素を確認して、取得します。
TestPage01では、ヘッダー領域にid要素がありますので、こちらを取得したいと思います。
idを取得する場合は、「find_element_by_id」を使用します。
・JupyterLabでの予測変換
JupyterLabで、コードを記述する際、予測変換の補助があります。
メソッド等記述する際、キーボードのタブキーを押すことで、予測変換リストが表示されます。
すべて記述すのではなく、こちらをうまく活用することで、スムーズにコードが記述できると思います。
ヘッダーのidを取得する場合は、以下のように記述します。
#ID取得
header=edgedriver.find_element_by_id(“header-l”)
time.sleep(3)
print(“id要素取得”)
printの記述が表示されていればOKです。
◇nameの取得
次は、「name」で要素を取得します。
名前を入力するテキストボックスの要素を取得します。
nameで取得する場合は、「find_element_by_name」を使用します。
#name取得
nametxtbox=edgedriver.find_element_by_name(“namae”)
time.sleep(3)
print(“name要素取得”)
printの記述が表示されていればOKです。
◇classの取得
「class」で要素を取得します。
テストページ上部の「TestPage_No1」がClass要素ですので、こちらの要素を取得したいと思います。
classで取得する場合、「find_element_by_class_name」を使用します。
以下のように記述し、タイトルのclassを取得します。
#class取得
title=edgedriver.find_element_by_class_name(“entry-title”)
time.sleep(3)
print(“class要素取得”)
printの記述が表示されていればOKです。
◇css取得
「css」で要素を取得します。
テストページの画像のCSSを取得します。
cssで要素を取得する場合は、要素を右クリック⇒コピー⇒「selectorをコピー」を選択します。
「css」を取得する場合、「find_element_by_css_selector」を使用します。
以下のように記述し、画像のcssを取得します。
#CSS取得
image01=edgedriver.find_element_by_css_selector(“#nocopy > div > p:nth-child(2) > img”)
time.sleep(3)
print(“CSS要素取得”)
printの記述が表示されていればOKです。
◇xpath取得
「xpath」で要素を取得します。
xpathで要素を取得する場合は、「find_element_by_xpath」を使用します。
要素は右クリック⇒コピー⇒「Xpathのコピー」または「完全なXpathをコピー」を選択します。
今回は「完全なXpathをコピー」で取得します。
#xpath取得
h3title=edgedriver.find_element_by_xpath(“/html/body/div[2]/div/div/div/div[2]/div[1]/main/article/div/div[2]/div[1]/div/h3”)
time.sleep(3)
print(“xpath要素取得”)
printの記述が表示されていればOKです。
□クリック
◇クリックについて
クリック操作について、Linkテキスト要素で述べたように、「click」メソッドを使用します。
クリック操作は、Linkテキストをクリック、ボタンのクリックの他、テキストボックスをクリックし、次のテキスト入力を行う際など、視覚的に判断しやすいようにコードに記述するのも、一つの手であります。
コード記述によるテスト自動化を行う際、エビデンスとして、画面の動画撮影など行う際に有効であると考えます。
◇クリック操作
「名前」のテキストボックスをクリックしたいと思います。
テキストボックスには、「name」の要素があるので、「find_element_by_name」を使用し以下のように記述します。
#クリック操作
nametextbox=edgedriver.find_element_by_name(“namae”)
time.sleep(3)
print(“クリックしました”)
printの記述が表示されていればOKです。
□テキスト入力
テキスト入力を行います。
テキスト入力を行う場合は、「send」メソッドを使用します。
テキストボックス内には、「susaki」を入力します。
「名前」のテキストボックスは、すでに要素取得していますので、以下のように記述します。
#テキスト入力
nametextbox.send_keys(“Susaki”)
time.sleep(3)
print(“名前を入力しました”)
実行して、printの記述、及びEdge側で名前が入力されていればOKです。
□一通りのテスト実行
最後に、今回操作した内容をテストシナリオとして、実施したいと思います。
JupyterLabでは、セルごとにコード実施を行うことができますが、テストシナリオとして、まとめて実施することもできます。
一通りのセルを選択して、shift+Mキーでマージします。
さらに、最後にブラウザを閉じ、Printで今回の自動操作がOKである旨のメッセージを表示したいと思います。
以下の内容を最後に記述します。
#ブラウザ終了
edgedriver.close()
print(“Jupyterlab_Web_Operation_Edge OK”)
edgedriverを一度終了後、セルをすべてマージ後、実行してみましょう。
edgedriverで一通りの操作後、終了し、以下のようにプリント内容が表示されればOKです。
今回一通り実行したipynbファイルは以下からダウンロードできます。
https://susakiworks.com/wp-content/uploads/2021/03/Jupyterlab_Web_Operation_Edge.zip
ご参考頂ければと思います。
■最後に
今回は、Seleniumライブラリのインストール、インポート、ブラウザ起動、ブラウザ遷移、ブラウザ終了についてご紹介いたしました。
次回もWeb操作について、ご紹介していきたいと思います。
最後まで見て頂き、ありがとうございました。
サイトトップへ
https://susakiworks.com/
Selenium実践入門 ――自動化による継続的なブラウザテスト WEB+DB PRESS plus
