ASP.NET初心者向け勉強会 -これからASP.NETを始めるには？- #vshtc https://vshtc.doorkeeper.jp/events/22638

1. Selenium 触ってみよう
ASP.NET初心者向け勉強会
2015/04/11 お だ

2. 自己紹介
織田 信亮(おだ しんすけ)
大阪で開発者しています
SQLWorld 代表 (http://sqlworld.org)
http://odashinsuke.hatenablog.com/
Twitter:@shinsukeoda

3. Selenium ってなに？
Web アプリケーション用のテストツール
ブラウザを使って Web アプリケーションの動作確認等
を行う
ブラウザの操作を Selenium が行ってくれる
本日触るのは Selenium WebDriver

4. Selenium WebDriver ってなに？
http://seleniumhq.org/docs/03_webdriver.html
Selenium が WebDriver と統合された
Selenium 1.0 だと JavaScript/HTML で記述がメイン
WebDriver は、Selenium ではセキュリティで制限され
ていたものが回避出来る
Selenium 2.0 で統合！

5. API が提供されている言語
Java
C#
Python
Ruby
PHP
Perl
JavaScript

6. 提供されている WebDriver
HtmlUnit Driver
Firefox Driver
Internet Explorer Driver
Chrome Driver
Opera Driver
iOS Driver
Android Driver
言語によっては、提供されていない Driver もある！

7. 環境構築 (Visual Studio)
Visual Studio NuGet からインストール
Package Manage Console(NuGet) から
Support は便利だからいれてます
Install-Package Selenium.WebDriver
Install-Package Selenium.Support
install-package Selenium.IEDriver
今日のコードはこちら
https://github.com/OdaShinsuke/20150411_ASPNET

8. みんな大好き IE Driver を使う
全てのゾーンで「保護モードを有効にする」チェックの
値を統一
拡大は 100% にしておく

9. using System;
using OpenQA.Selenium.IE;
using OpenQA.Selenium;
class Program {
static void Main(string[] args) {
IWebDriver driver = new InternetExplorerDriver();
Console.ReadKey();
driver.Quit();
}
}
とりあえず、ブラウザ起動してみる

10. using System;
using OpenQA.Selenium.IE;
using OpenQA.Selenium;
class Program {
static void Main(string[] args) {
IWebDriver driver = new InternetExplorerDriver();
driver.Navigate().GoToUrl("http://www.bing.com");
Console.WriteLine(driver.Title);
Console.ReadKey();
driver.Quit();
}
}
Bing にいってみる

11. API の基本
ドライバー
IWebDriver (WebDriver)
エレメント
IWebElement (WebElement)
ロケーター
By

12. ドライバー の API
ページのタイトル取得
要素の検索
ISearchContext を実装
FindElement, FindElements
ページ遷移
INavigation を保持
GoToUrl, Back, Forward
コンテキストの切り替え
ITargetLocator を保持
Alert, Frame, Window

13. using System;
using OpenQA.Selenium.IE;
using OpenQA.Selenium;
class Program {
static void Main(string[] args) {
IWebDriver driver = new InternetExplorerDriver();
driver.Navigate().GoToUrl("http://www.bing.com");
IWebElement element = driver.FindElement(By.Name("q"));
element.SendKeys("セレニウム ウェブドライバー");
Console.ReadKey();
driver.Quit();
}
}
テキストボックスに文字を入力

15. ロケーターには何がある？
Id
Name
TagName
ClassName
CssSelector
LinkText
PartialLinkText
XPath

16. using System;
using OpenQA.Selenium.IE;
using OpenQA.Selenium;
class Program {
static void Main(string[] args) {
IWebDriver driver = new InternetExplorerDriver();
driver.Navigate().GoToUrl("http://www.bing.com");
IWebElement elementByName = driver.FindElement(By.Name("q"));
elementByName.SendKeys("セレニウム ウェブドライバー");
IWebElement elementById = driver.FindElement(By.Id("sb_form_q"));
elementById.SendKeys(" ID で取ったお");
IWebElement elementByCss = driver.FindElement(
By.CssSelector("b_searchbox"));
elementByCss.Clear();
elementByCss.SendKeys("CssSelector で");
Console.ReadKey();
driver.Quit();
}
}
色んな取り方をしてみる

17. エレメント の メソッド
SendKeys
Clear
Click
GetAttribute
input タグの入力値はこれで取得する
GetCssValue
Submit
要素の検索 (ISearchContext を実装)

18. エレメント の プロパティ
基本 get だけ
Displayed
Enabled
Location
Selected
チェックボックスや Select の Option
Size
TagName
Text
タグに挟まれたテキストのこと
テキストボックスの値じゃない！

19. class Program {
static void Main(string[] args) {
var driver = new InternetExplorerDriver();
try {
driver.Navigate().GoToUrl("http://www.bing.com");
var txt条件 = driver.FindElementByName("q");
txt条件.SendKeys("SQLWorld");
txt条件.Submit();
Thread.Sleep(3000); // 次の画面に遷移するまで待つ
var lbl件数 = driver.FindElementByClassName("sb_count");
Console.WriteLine(lbl件数.Text);
Console.ReadKey();
} finally {
driver.Quit();
}
}
}
検索してみる

20. 便利なやつ
IWait(Wait)
Selenium.Support に含まれている
OpenQA.Selenium.Support.UI.IWait
Thread.Sleep はもう古い！
指定条件を満たすまで待機する
タイムアウト指定することで、異常時には例外で終了する

21. Wait
WebDriverWait が良く使われる
コンストラクタでタイムアウト時間指定
Until メソッドに Func を渡し条件指定
Func は、既定の実装が幾つかある
ExpectedConditions
Func を自前で実装も可
wait.Until(d => d.Title == "Microsoft - Bing");
IWait<IWebDriver> wait =
new WebDriverWait(driver, new TimeSpan(0, 0,10));
wait.Until(ExpectedConditions.TitleIs("Microsoft - Bing"));

22. class Program {
static void Main(string[] args) {
var driver = new InternetExplorerDriver();
try {
driver.Navigate().GoToUrl("http://www.bing.com");
var txt条件 = driver.FindElementByName("q");
txt条件.SendKeys("SQLWorld");
txt条件.Submit();
var wait = new WebDriverWait(driver, new TimeSpan(0, 0, 10));
wait.Until(ExpectedConditions.TitleIs("SQLWorld - Bing"));
var lbl件数 = driver.FindElementByClassName("sb_count");
Console.WriteLine(lbl件数.Text);
Console.ReadKey();
} finally {
driver.Quit();
}
}
}
Wait 使って検索してみる

23. スクリーンショット
ITakesScreenshot を実装している Driver が対象
殆どの Driver は実装している
driver.GetScreenshot().SaveAsFile(
@"c:workhoge.png", ImageFormat.Png);

24. class Program {
static void Main(string[] args) {
var driver = new InternetExplorerDriver();
try {
driver.Navigate().GoToUrl("http://sqlworld.org/event/20150425/");
var wait = new WebDriverWait(driver, new TimeSpan(0, 0, 10));
wait.Until(ExpectedConditions.TitleIs("SqlWorld :: SQLWorld★大阪#30"));
driver.GetScreenshot().SaveAsFile(
Environment.GetFolderPath(Environment.SpecialFolder.Desktop)
+ @"sqlworld.png",
ImageFormat.Png);
Console.ReadKey();
} finally {
driver.Quit();
}
}
}
スクリーンショット をとってみる

25. class Program {
static void Main(string[] args) {
var driver = new InternetExplorerDriver();
try {
driver.Navigate().GoToUrl("http://sqlworld.org/event/20150425/");
var wait = new WebDriverWait(driver, new TimeSpan(0, 0, 10));
wait.Until(ExpectedConditions.TitleIs("SqlWorld :: SQLWorld★大阪#30"));
driver.FindElementByName("name").SendKeys("あなたのお名前");
driver.FindElementByName("email").SendKeys("あなたのE-Mail");
driver.FindElementByName("commentText").SendKeys(@"宜しくお願いします！
懇親会：参加");
Console.ReadKey();
driver.FindElementByName("Post Comment").Submit();
Console.ReadKey();
} finally {
driver.Quit();
}
}
}
実践編！