win_jupyterlab_web_Operation_edge_title

【テスト自動化】Python selenium(link,id,xpath要素取得/クリック/テキスト入力)Edge操作

皆さん、こんばんは。
今回は、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
win_jupyterlab_web_Operation_edge01

エラー等表示されなければ、問題なくインポートできていると思います。
以下のように「print」で実行結果を出して、視覚的にわかりやすくするのも、1つの手だと思います。

・Edge Driver設定

Edge Driverを使えるように設定します。
こちらについては、過去記事をご参照ください。

EdgeDriverを事前にダウンロードし、パスがわかっていっれば以下のように記述し、Shift+Enterで実行起動させます。
#Edge Driver
edgedriver=webdriver.Edge(executable_path=”C:\\Users\sinsu\\WebDrivers\\EdgeDriver\\V89\\msedgedriver.exe”)
win_jupyterlab_web_Operation_edge02

・ブラウザサイズ最大化

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(“テストページに遷移しました”)

以上で準備が整いました。
win_jupyterlab_web_Operation_edge03

 

□要素取得

◇要素取得について

要素について、以前Katalon Recorderの紹介する際にご紹介した内容とほとんど同じとなります。
以下過去記事も併せてご確認頂ければと思います。

【Katalon Recorder】を使ってWebブラウザのテスト自動化を始めよう!①導入・レコード編

今回は、「Edge」ブラウザとなっていますので、「Edge」での要素の取得について、ご紹介していきたいと思います。

EdgeもChromeと同様、取得したい要素を右クリックから「開発者ツールで調査する」を選択します。
今回のWeb操作は、「TestPage01」ページを利用したいと思いますので、リンクテキストを右クリック⇒「開発者ツールで調査する」を選択します。
すると以下のように表示され、テキストリンクの要素を確認することができます。

win_jupyterlab_web_Operation_edge04

◇Linkテキスト取得

リンクテキストの場合は、右側に表示された要素を右クリック⇒コピー⇒要素のコピーを選択します。
win_jupyterlab_web_Operation_edge06
Jupyterlabのセル内に張り付けて確認します。
以下のテキスト部分を使用します。

win_jupyterlab_web_Operation_edge07

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です。
win_jupyterlab_web_Operation_edge08

◇id取得

続いて、idで要素を取得します。
idも、Linkテキストと同様に、要素を確認して、取得します。
TestPage01では、ヘッダー領域にid要素がありますので、こちらを取得したいと思います。
idを取得する場合は、「find_element_by_id」を使用します。
win_jupyterlab_web_Operation_edge09

・JupyterLabでの予測変換

JupyterLabで、コードを記述する際、予測変換の補助があります。
メソッド等記述する際、キーボードのタブキーを押すことで、予測変換リストが表示されます。
すべて記述すのではなく、こちらをうまく活用することで、スムーズにコードが記述できると思います。
win_jupyterlab_web_Operation_edge10

ヘッダーのidを取得する場合は、以下のように記述します。
#ID取得
header=edgedriver.find_element_by_id(“header-l”)
time.sleep(3)
print(“id要素取得”)

printの記述が表示されていればOKです。

◇nameの取得

次は、「name」で要素を取得します。
名前を入力するテキストボックスの要素を取得します。
nameで取得する場合は、「find_element_by_name」を使用します。
win_jupyterlab_web_Operation_edge11

#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を取得します。
win_jupyterlab_web_Operation_edge12

#class取得
title=edgedriver.find_element_by_class_name(“entry-title”)
time.sleep(3)
print(“class要素取得”)

printの記述が表示されていればOKです。

◇css取得

「css」で要素を取得します。
テストページの画像のCSSを取得します。
cssで要素を取得する場合は、要素を右クリック⇒コピー⇒「selectorをコピー」を選択します。
win_jupyterlab_web_Operation_edge13

「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をコピー」で取得します。
win_jupyterlab_web_Operation_edge14

#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」を使用し以下のように記述します。
win_jupyterlab_web_Operation_edge15

#クリック操作
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です。
win_jupyterlab_web_Operation_edge16B

□一通りのテスト実行

最後に、今回操作した内容をテストシナリオとして、実施したいと思います。
JupyterLabでは、セルごとにコード実施を行うことができますが、テストシナリオとして、まとめて実施することもできます。
一通りのセルを選択して、shift+Mキーでマージします。

さらに、最後にブラウザを閉じ、Printで今回の自動操作がOKである旨のメッセージを表示したいと思います。
以下の内容を最後に記述します。
#ブラウザ終了
edgedriver.close()
print(“Jupyterlab_Web_Operation_Edge OK”)

edgedriverを一度終了後、セルをすべてマージ後、実行してみましょう。
edgedriverで一通りの操作後、終了し、以下のようにプリント内容が表示されればOKです。
win_jupyterlab_web_Operation_edge17

今回一通り実行したipynbファイルは以下からダウンロードできます。
https://susakiworks.com/wp-content/uploads/2021/03/Jupyterlab_Web_Operation_Edge.zip

ご参考頂ければと思います。

 

■最後に

今回は、Seleniumライブラリのインストール、インポート、ブラウザ起動、ブラウザ遷移、ブラウザ終了についてご紹介いたしました。
次回もWeb操作について、ご紹介していきたいと思います。

最後まで見て頂き、ありがとうございました。

 

サイトトップへ
https://susakiworks.com/

Selenium実践入門 ――自動化による継続的なブラウザテスト WEB+DB PRESS plus
Selenium実践編

エキスパートが教えるSelenium最前線
エキスパートが教えるSelenium最前線

この記事が気に入ったら
いいね ! しよう

Twitter で
win_jupyterlab_web_Operation_edge_title
最新情報をチェックしよう!