【Selenide + Eclipse + Servlet/JSP】コピペでできるテスト自動化

# はじめに
本記事ではselenide + Eclipse + Servlet/JSPを使ったテスト自動化の導入方法について説明します。特にテスト自動化ツールを導入したことのない人向けに、行うべき作業を細かく説明しているので、テスト自動化を導入したいけど何からやっていいかわからないという方は参考にしてください


# 前提条件
- Fire Foxがインストールされている(インストールしていない人はインストールしてください)
- Eclipseを使ってServlet/JSPのプロジェクトを実行できる


# 目次
1. [とりあえずやってみる](#とりあえずやってみる)
1. [参考文献](#参考文献)

# とりあえずやってみる
### プロジェクトの作成

ファイル→新規→動的Webプロジェクトをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/b5aeacc3-2977-a984-cd54-3ba3e28d17c4.png)

プロジェクト名にAutomationTestingを入力して完了をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/a08bdef5-f06b-efc0-f7c5-38f0a57286e1.png)

### プロジェクトの構成変更

AutomationTestingプロジェクトを右クリック→構成→Maven プロジェクトへ変換をクリック（構成は↓をクリックしてメニューをスクロールしないとでてきません）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/43a54b19-d99f-149d-999e-b2d95ba2dc3f.png)

完了をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/ac381799-b187-a114-473a-b9b32a01148e.png)

### xmlの編集

AutomationTesting/pom.xmlを右クリック→次で開く→テキストエディターをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/7af83711-9df3-c063-736c-2c9fe2f142b9.png)

内容を以下の通り編集

```xml:pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>AutomationTesting</groupId>
  <artifactId>AutomationTesting</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  <dependencies>
	    <dependency>
    	    <groupId>com.codeborne</groupId>
        	<artifactId>selenide</artifactId>
        	<version>4.9.1</version>
    	</dependency>
    	<dependency>
        	<groupId>junit</groupId>
        	<artifactId>junit</artifactId>
        	<version>4.12</version>
    	</dependency>
  </dependencies>
  <build>
    <sourceDirectory>src</sourceDirectory>
    <plugins>
      <plugin>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.5.1</version>
        <configuration>
          <source>1.8</source>
          <target>1.8</target>
        </configuration>
      </plugin>
      <plugin>
        <artifactId>maven-war-plugin</artifactId>
        <version>3.0.0</version>
        <configuration>
          <warSourceDirectory>WebContent</warSourceDirectory>
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>
```

### Selenideを使ったテストコードの作成

Javaリソース/srcを右クリック→新規→クラスをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/a8f219a9-a3c3-2fcc-e767-71697bea0a1e.png)

パッケージをtest、名前をExecTestにして完了をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/da94fa16-d803-a1ae-0ea6-d239064771ca.png)

ExecTestの内容を以下のように変更

```java:ExecTest.java
package test;

import static com.codeborne.selenide.Condition.*;

import org.junit.Test;

import com.codeborne.selenide.Selenide;


public class ExecTest {
	@Test
	public void executeTest() {
		// test.jspにアクセス
	    Selenide.open("http://localhost:8080/AutomationTesting/test/test.jsp");
	    // Hello Worldという内容が書かれているかチェック
	    Selenide.$(".test").shouldHave(text("Hello World"));
	}
}

```

### テストの対象となるページの作成

WebContentを右クリック→新規→フォルダーをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/fc8b7127-5ac3-85f8-7a0e-c48f4205f2c7.png)

フォルダー名をtestにして完了をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/9f971e81-9599-7acf-8547-162e7509bccc.png)

先ほど作成した完了フォルダーを右クリック→新規→JSP ファイルをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/187dea91-7a75-37bd-85a1-34738872d80c.png)

ファイル名をjspとして完了をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/4143d120-6e5c-d908-2825-6c15eb69c3ae.png)
test.jspの内容を以下のように変更
```html:test.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Echo</title>
</head>
<body>
    <div class='test'>
    	Hello World
    </div>
</body>
</html>
```

動作確認のため実行ボタン→実行→サーバーで実行をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/4b2ebc23-db09-2b36-aac3-0893bef4c358.png)

完了をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/b5eeff4c-d4ea-727a-27fd-e18702c5ea0c.png)

Hello Worldがでればok

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/3d508c1a-a10a-d936-58ee-a48cab840893.png)

### テストの実行

ExecTest.javaが開かれた状態で実行ボタン→実行→JUnitテストをクリック→JUnitのタブで「実行1/1」となっていれば成功です

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/e5bc7183-033f-4947-a44c-55ee28d4ce25.png)

これで作業は完了です。お疲れさまでした。

# 参考文献
本記事の執筆にあたっては以下の記事を参考にしました。

https://qiita.com/tashxii/items/78e9288f7956a81caac1