SeleniumIDEを使ってPhoenixPJをテストする

# Brightの対象
Webアプリ開発 Elixir > クラス1 > テスト > 結合テスト > SeleniumIDE

# SeleniumIDEのインストール

「︙」→「拡張機能」→「Chromeウェブストアにアクセス」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/350370fc-1fad-6426-467c-801a58b03eed.png)

Chromeウェブストアにアクセスが表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/ca079317-4324-2266-ae3c-fe3d1653248b.png)

検索窓に「SeleniumIDE」を入力して検索し「SeleniumIDE」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/78e875c9-80b3-b26b-d3d6-aec89222663b.png)

「Chromeに追加」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/f2bdf931-ef86-7c90-74e1-599bc0ef9fcd.png)

「拡張機能を追加」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/50a942b7-4cdd-3c25-c22f-4aa88e35fce1.png)

「✗」で閉じる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/e0860dca-a24d-4ce5-d1d5-9078aa95ca23.png)

# SeleniumIDEを使ってみる
「拡張機能」→「SeleniumIDE」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/e5290c78-29d8-aa93-bf2b-7275c436e1a0.png)

「Create a new project」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/db6a8bd1-9720-73d5-e157-85f27e624568.png)

「PROJECT NAME」を入力する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/5314c65c-4174-d8c6-caa7-355a82e2cc5f.png)

「BASE URL」に「 http://localhost:4000/users 」を入力する
前提事項として下記のコラムで「mix phx.server」で動いていること

https://qiita.com/t-yamanashi/items/1e6a72c6e0bf863e7089



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/39a62498-16c7-9182-4451-990f984a2a9e.png)
---
ここらは記録する内容です 

https://qiita.com/t-yamanashi/items/1e6a72c6e0bf863e7089#%E3%83%86%E3%82%B9%E3%83%88

の「テスト」を参考に操作してください

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/d33a9f01-68fa-dd01-015c-f1e1003e09ad.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/758a154c-8020-e91c-2380-e8a1cdd9e5f3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/7f2f1223-a3b4-da05-d54c-ba356fc6c1e3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/39d301fa-45ce-4165-faa2-441553aa0bd1.png)

値のチェックは下記の画像のように可能です

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/76fc3216-7bc7-2ad6-58a0-e64c97c3a0af.png)

赤い「■」で記録を停止できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/287d5139-8217-c41b-1f15-7e80ce8347eb.png)

「TEST　NAME」を入力します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/1189acc7-6975-264c-94f5-376cd0a0d6df.png)

下記のように記録ができました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/38894e28-fc61-ca72-2076-593c3c89789c.png)

不要な記録は「Delete」キーで削除できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/18ad2f32-6c34-8819-0dc5-317622a92c60.png)

# テスト実行
「▷」で実行できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/213c769b-8d39-8159-e8a9-49637188671f.png)
実行速度は下記のように変更可能です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/46f418c4-13da-d311-409f-d80ca2143959.png)

実際の動作

https://www.youtube.com/watch?v=DdEDr2Fi3Pc