[ThaoVTP] [Dịch bài viết] Bí mật tự động lấy test evidence (Part 1): Sử dụng Selenium VBA, tự động thao tác trên Browser rồi paste screen shoot vào Excel

Lý do chọn dịch bài viết này:

Dự án tôi đang làm, khách hàng yêu cầu chụp rất nhiều evidence làm bằng chứng test. Đối với dev hay QA đó là một công việc khá tốn thời gian và effort. Do đó, tôi muốn thử tìm hiểu xem có tool nào giúp dev dễ dàng và thỏa mái làm công việc nhàm chán này không.  Một trong số đó là Selenium VBA.

Bài dịch này giới thiệu cách install và cách sử dụng cơ bản của Selenium VBA.

Ngoài ra, sẽ đưa ra ví dụ cụ thể, minh chứng cho khả năng lấy test evidence của Selenium VBA.

Cuối cùng, hướng dẫn cách chụp màn hình Web site và paste excel.

========================================================================================

Nội dung bài dịch:

Bí mật tự động lấy test evidence (Part 1):

Sử dụng Selenium VBA, tự động thao tác trên Browser rồi paste screen shoot vào Excel

Evidence (Record thao tác) rất được coi trọng trong test software (Integration test ~ System test) khi phát triển hệ thống. Qua 2 bài viết (Part 1 và Part 2), tôi sẽ giới thiệu technology của VBA/Macro để tự động hóa việc paste screen shoot (Evidence) đã capture vào tài liệu test spec và tài liệu deliverables. Ở phần 1 tôi sẽ nói về phương pháp install và cách sử dụng Selenium VBA, cách thức tự động paste screen shoot vào Excel.

Chụp screen shoot làm evidence

Khi nhận được yêu cầu phát triển hệ thống từ Client rồi delivery sản phẩm phát triển thì có trường hợp phải cung cấp screen shoot paste vào Excel như là evidence, kèm theo tài liệu deliverables. Công việc này nhằm đưa ra bằng chứng “Tôi đã thực hiện test như thế này” cho Client. Quả thực là công việc này vô cùng hữu ích trong trường hợp giải thích chức năng và những điểm hạn chế của deliverables cho Client.

Thực tế, nếu paste screen shoot vào test spec và tài liệu deliverables (file Excel) rồi delivery như 1 phần của deliverables sẽ góp phần rất lớn vào việc giải quyết vấn đề cũng như trường hợp phát sinh các trouble về sau.

Tuy nhiên, vấn đề hiện tại là công việc paste bằng tay từng screen shoot phần chức năng của deliverables vào Excel là công việc đơn điệu, cũng có khi lại là công việc khổ sở đối với developer.

Do đó, có 「Selenium VBA」- một tool hỗ trợ tự động làm công việc này. Bản thân Selenium VBA sẽ sinh ra code, cho record Browsing của 1 loạt Web. Đây là tool vô cùng tiện lợi để thực hiện follow-up hoạt động, đây không phải là tool chụp screen shoot.

Vì vậy, nội dung chính của bài viết này là thử tạo program tự động lấy screen shoot bằng cách add thêm code chụp screen shoot trong flow browsing và code paste screen shoot vào Excel.

Trước hết, tôi xin lý giải phương pháp install và cách sử dụng của tool Selenium VBA. Bạn nào muốn biết thêm về「Selenium」「Selenium IDE」thì tham khảo bài viết trong link sau. (Sẽ dịch bài viết bên dưới vào dịp khác)

Ngoài ra, bạn nào muốn có kiến thức cơ bản về VBA thì tham khảo nội dung sau.

Cách install và cách sử dụng của Selenium VBA như thế nào? Có thể làm được gì?

「Selenium」 nói đơn giản, đó là tool tự động test Web application sử dụng Web Browser. Sản phẩm mà có thể sử dụng tool này ở cả VBA là Selenium VBA. Nếu dùng tool này, có thể sử dụng Excel và VBA code, có thể tự động hóa Web Browsing.

Ví dụ, trường hợp sử dụng Web Browser là Firefox, có thể record thao tác Web Browsing của user bằng cách sử dụng Firefox plugin「Selenium IDE」, convert file VBA hoặc VBS bằng format đã chỉ định.

Nếu có thể viết ra trên VBA thì có thể quản lý case muốn test bằng Excel, rồi thực hiện từng case bằng「Selenium」.

Như tôi đã viết ở trên, Selenium VBA không phải tool chụp screen shoot nên mong các bạn đừng nhầm nhé. Chỉ cần install Selenium VBA, thì「SeleniumWrapper Type Library」 sẽ được install,  có thể tham chiếu cái này, paste screen shoot của Website bất kỳ từ VBA của Excel vào Excel. Nội dung này tôi sẽ giải thích sau.

Install Selenium VBA

Selenium VBA thì có thể download từ URL sau.

Hình 1 Click「Latest Version」của 「Download」

Sau đó, sẽ vào page download, click file có 「Name」 là「SeleniumWrapperSetup-1.0.19.0.exe(14.9MB)」 rồi download.

Ngoài ra, vì lần này sử dụng Browser là Firefox nên click 「Mozilla Firefox 8 or superior [Download Page]」 trong 「Minimum Requirements」ở dưới page của URL nói trên rồi download Firefox. Phải install Firefox trước khi install Selenium VBA. Version mới nhất của Firefox đang là「31」(Thời điểm tác giả người nhật viết bài này).

Nào, các bạn hãy thử install Selenium VBA. Nếu double click 「SeleniumWrapperSetup-1.0.19.0.exe」 đã download thì Setup Wizard sẽ được start (Hình 2).

Hình2 Setup Wizard được start

Nếu click vào「Next」 thì màn hình「ライセンス承諾/Đồng ý license」 được hiển thị, check vào「I accept the agreement」 rồi click「Next」.

Màn hình yêu cầu chọn folder để lưu file install được hiển thị, cứ để nguyên default như vậy và click「Next」.

Button 「Install」 được hiển thị, click vào đó. Việc install sẽ được start. (Hình 3).

Hình3 Việc install được start

Sẽ hoàn thành việc install trong vài giây (Hình 4).

Hình4 Hoàn thành install

Nếu nhìn Hình4 thì có thể hiểu:Đang check vào option 「Selenium IDE」 đã được install kèm addon của Firefox. Do đó, nếu không install Firefox trước thì đến màn hình cuối cùng này sẽ hiển thị lỗi. Hình như có thể sử dụng được「Internet Explorer」 nhưng lần này tôi dùng Firefox – được chỉ định như là default Browser.

Nếu click vào「Finish」 thì Firefox sẽ khởi động. Màn hình install「アドオン/Addon」 được hiển thị nhưng lần này thì không install (Hình 5).

Hình 5 Màn hình install Addon được hiển thị

Cách sử dụng cơ bản của Selenium VBA

Bắt đầu từ đây chúng ta hãy cùng thử sử dụng Selenium VBA nhé.

Khởi động Selenium IDE

Firefox thì đã khởi động rồi, từ thanh menu chọn「ツール/Tool」. Khi khởi động Firefox lần đầu, có trường hợp thanh menu không được hiển thị nên click phải thanh công cụ phía trên Firefox, từ menu được hiển thị, chọn「メニューバー/Menu bar」. (Hình 6).

Hình6 Chọn「メニューバー/Menu bar」

Sau đó, menu được hiển thị ở Firefox như hình 7.

Hình7 Menu được hiển thị

Trên màn hình của hình7, chọn「ツール/Tool」. Sau đó, menu tên là「Selenium IDE」 được hiển thị (Hình 8).

Hình 8 Menu 「Selenium IDE」 được hiển thị

Nếu click thì màn hình「Selenium IDE 2.5.0」 được hiển thị (Hình 9).

Hình9 Màn hình「Selenium IDE 2.5.0」 được hiển thị

Từ màn hình như hình9, chọn [オプション/Option]→[フォーマット/Format], rồi chọn「VBA / Remote Control」(Hình10).

Hình10 Chọn「VBA / Remote Control」

Ở 「Base URL」 như hình 10, lần này đang chỉ định 「http://www.google.co.jp」 để test (Hình 11). Nội dung này tôi sẽ giải thích sau nhưng, ở trạng thái「テストの記録/Record test」, URL của page đang mở bằng Firefox sẽ được đăng ký là「Base URL」, nếu nhập URL mới vào address bar của Firefox rồi gõ return key thì「Base URL」 sẽ được thay đổi thành URL đã nhập vào address bar đó.

Hình 11 URL của Google đang được chỉ định ở「Base URL」

Trạng thái「Dấu chấm đỏ」ở góc bên phải của hình 10 đang được hiển thị nhạt hơn thể hiện là từ giờ sẽ record tất cả các công việc trên Web. Nếu nhìn menu「アクション/Action」sẽ thấy là đang check vào「テストの記録/Record test」 (Hình 12).

Hình12 Check vào「テストの記録/Record test」, 「Dấu chấm đỏ」 đang hiển thị nhạt hơn chút

Nếu click lại「Dấu chấm đỏ」 thì「Dấu chấm đỏ」 sẽ đậm hơn một chút, không check vào「テストの記録/Record test」 của menu 「アクション/Action」 nữa (Hình 13). Bằng việc click đi click lại「Dấu chấm đỏ」này thì có thể chuyển ON và OFF「テストの記録/Record test」.

Hình 13 Không check vào「テストの記録/Record test」,「Dấu chấm đỏ」 sẽ đậm hơn một chút

Nếu so sánh「Dấu chấm đỏ」ở Hình 12 và Hình 13 thì sẽ thấy dấu chấm đỏ khi không check vào「テストの記録/Record test」 được hiển thị đậm hơn chút ít.

Flow record test

Click「Dấu chấm đỏ」 sẽ thành trạng thái「テストの記録/Record test」. Lần này, hãy thử record chuỗi flow cho hiển thị page chuỗi bài viết「Excel VBA」 của @IT làm ví dụ nhé.

Input「http://www.atmarkit.co.jp」 vào address bar của Firefox. Từ màn hình được hiển thị, chọn「Excelでプログラムの作成を始めるメリットとマクロの基本/Ưu điểm và nền tảng Macro bắt đầu tạo program bằng Excel」trong 「PC記事ランキング/Ranking bài viết PC」(Hình 14)

Hình 14 Chọn「Excelでプログラムの作成を始めるメリットとマクロの基本/Ưu điểm và nền tảng Macro bắt đầu tạo program bằng Excel」trong 「PC記事ランキング/Ranking bài viết PC」

Nội dung bài viết đã chọn được hiển thị. Tiếp theo chọn「Excelに入力フォームを作成、コントロールを追加、表示、ボタンでイベント実行/Tạo form input vào Excel, add, hiển thị control, run event bằng button」mà đang được hiển thị ở 「記事ランキング/Ranking bài viết」 trong bài báo được hiển thị. (Hình 15).

Hình 15 Chọn「Excelに入力フォームを作成、コントロールを追加、表示、ボタンでイベント実行/Tạo form input vào Excel, add, hiển thị control, run event bằng button」

Sau khi hoàn thành record thì codeVBA sẽ được sinh ra

Sau đó, từ màn hình được hiển thị, tôi đã thử di chuyển đến nhiều page của @IT. Đến xử lý này, click「Dấu chấm đỏ」 sẽ turn OFF「テストの記録/Record test」. Nếu làm như vậy thì code như hình 16 sẽ được record.

Hình 16 Code record Browsing từ đầu đến đây

Code của hình16 sẽ thành code như list 1.

  1. PublicSubUntitled()
  2. Dim selenium AsNewSeleniumWrapper.WebDriver
  3. selenium.start "firefox","http://www.atmarkit.co.jp/"
  4. selenium.setImplicitWait 5000
  5. selenium.open "/"
  6. selenium.clickAndWait "link=Excelでプログラム作成を始めるメリットとマクロの基本"
  7. selenium.clickAndWait "link=Excelに入力フォームを作成、コントロールを追加、表示、ボタンでイベント実行"
  8. selenium.clickAndWait "link=@IT - アットマーク・アイティ"
  9. selenium.clickAndWait "link=ZIPファイルにパスワードを付ける"
  10. selenium.clickAndWait "link=Excelを別ウィンドウで複数同時に操作する"
  11. selenium.stop
  12. EndSub List1 Code di chuyển, được record nhiều trong site @IT (Code được tự động record)

Thực hiện toàn bộ test suite

Ở trạng thái list 1 đang được record, nếu click icon ▲ ở bên phải của 「テストスイート全体の実行/Thực hiện toàn bộ test suite」 thì trình tự đã Browsing trong site@IT đến thời điểm đó sẽ được tái hiện và hiển thị như slide show.Tôi đã chuẩn bị video bên dưới xem thực tế được hiển thị như thế nào.

※Nếu click vào ảnh thì video sẽ play

Từ trạng thái này, nếu xem「テーブル/Table」 thì command được đăng ký (Hình 17).

Hình17 Command được đăng ký vào「テーブル/Table」

Command chủ yếu đang dùng lần này là 2 loại「Open」và「clickAndWait」.「Open」là command mở page tương ứng với từng chữ đã đọc.「clickAndWait」là command click link.

Trường hợp run trực tiếp từ command hình17, nếu double click tuần tự command sau từ「Open」 thì quá trình Browsing sẽ được tái hiện, hiển thị.

Nếu xem code của list1 sẽ hiểu: cuối cùng màn hình「Excelを別ウィンドウで複数同時に操作する/Thao tác đồng thời nhiều Excel trên cửa sổ khác」được hiển thị. (Hình 18).

Hình18 Màn hình「Excelを別ウィンドウで複数同時に操作する/Thao tác đồng thời nhiều Excel trên cửa sổ khác」- page cuối cùng- được hiển thị

VBA code cũng có thể lưu bằng file text

Selenium VBA như nói ở trên sẽ record thao tác trên Web site, rồi ghi ra thành code VBA. Code VBA được ghi ra có thể được lưu vào chỗ bất kỳ bằng cách chọn[ファイル/File]→[テストケースをエクスポート/Export testcae] rồi chọn「VBA / Remote Control」.

Đuôi fie là file text「.txt」 cũng được. Tôi đã thử export code record lần này thành file「atmarkIT.txt」. Nếu thử mở kết quả đã lưu sẽ thấy được lưu như hình 19.

Hình 19 Code của kết quả search được ghi ra file text

Đang được lưu trong trạng thái không xuống dòng nhưng nếu khởi động VBE(Visual Basic Editor)từ Excel rồi copy paste vào trong module tiêu chuẩn thì có thể tạo macro mà có thể thực hiện một chuỗi search.

Tuy nhiên, cần tham khảo「SeleniumWrapper Type Library」trong setting tham khảo. Tôi sẽ giải thích về setting tham khảo này sau.

Như đã nói ở trên, cho dù add code như hình 19 này vào module tiêu chuẩn từ VBE của Excel rồi cứ copy và paste code y nguyên như thế thì hoạt động không có vấn đề gì cả. Nhưng, các bạn cần phải chú ý với một loạt thao tác như cho hiển thị kết quả search sử dụng từ khóa「Google」trên 「Selenium IDE」thì có trường hợp dù có copy paste nguyên code đó cũng không hoạt động nhé.

Đến đây, tôi đã giải thích nhiều về cách dùng của Selenium VBA nhưng chủ đề của bài viết lần này là chụp screen shoot làm evidence, paste vào tài liệu test và tài liệu deliverables nên sẽ tôi sẽ chú trọng vào tự động lấy screen shoot rồi paste evidence.

Từ trang sau, sẽ nói về tạo code VBA để tự động lấy screen shoot rồi paste vào file bằng cách refer「SeleniumWrapper Type Library」.

Thực hiện chụp screen shoot trên Web site rồi paste vào Excel

Như nói ở trên,cũng có thể viết VBA bằng cách sử dụng code đã get bằngSelenium VBA nhưng dẫu saoví dụ trên cũng chỉ là 1 code ví dụ về cách sử dụng Selenium VBA nên ở đây tôi sẽ không sử dụng code VBA đã get lúc nãy.

Tôi sẽ giải thích cách chụp screen shoot và cách paste theo form làm ví dụ có tính đa năng hơn. Mong các bạn tùy ý điều chỉnh để sử dụng cho phù hợp.

Bạn nào muốn biết cơ bản về Excel form thì tham khảo bài viết「Excelに入力フォームを作成、コントロールを追加、表示、ボタンでイベント実行」 (Tạo form input vào Excel, add, hiển thị control, run event bằng button) nhé.

Setting tham khảo「SeleniumWrapper Type Libray」

Vì ở đây sử dụng「SeleniumWrapper.WebDriver」 nên cần tham khảo trước「SeleniumWrapper Type Libray」.

Từ menu VBE(Visual Basic Editor), chọn[ツール/Tool]→[参照設定/Setting tham khảo], từ màn hình「参照設定/Setting tham khảo」 được hiển thị, check vào「SeleniumWrapper Type Library」(Hình20). Sau đó, chỉ cần click「OK」.

Hình20 Check vào「SeleniumWrapper Type Library」 từ setting tham khảo

Tạo form dùng để thực hiện test

Trước hết, từ menu Excel chọn[挿入/Insert]→[図形/Shapes], paste「角丸四角形/Hình chữ nhật vát 4 góc」 vào excel rồi chỉ định sẵn text「フォームの表示/Hiển thị form」. (Hình21)

Hình 21 Bố trí button「フォームの表示/Hiển thị form」

Tiếp theo, từ menu Excel chọn[開発/Start]→[Visual Basic], khởi động VBE(Visual Basic Editor).

Từ menu, chọn[挿入/Insert]→[ユーザーフォーム/User form]. Khi đó, màm hình form sẽ được hiển thị. Chọn form này, chỉ định「画面キャプチャを撮る/Chụp capture màn hình」 vào property「Caption」. Khi đó title của form sẽ thay đổi thành「画面キャプチャを撮る/Chụp capture màn hình」.

Tiếp theo, trên form, từ tool box, bố trí 1 「リストボックス/List box」. Property「オブジェクト名/Tên object」 thì để nguyên default là「ListBox1」.

Loại font và size được hiển thị trong list box thì có thể set từ property「Font」. Tất nhiên là các bạn set thành size chữ, kiểu chữ yêu thích của mình cũng chẳng sao.

Tất cả nội dung đã set như hình 22.

Hình22 Bố trí control trên form

Xử lý khi UserForm thành Activate

ChọnUserForm1 trong project, chọn「コードの表示/Hiển thị code」từ menu được hiển thị bằng cách click phải chuột. Màn hình code editor được hiển thị nên cứ thế ghi code vào trong đó.

Trước hết, sẽ viết code như List 2 khi UserForm đã Activate.

Form code khi UserForm đã Activate thì có thể tạo bằng cách thức như hình 23.

Hình23 Đã chọn Activate UserForm

Nếu chọn「UserForm」 từ dropdown list bên trái, chọn「Activate」 từ dropdown list bên phải thì form sau sẽ được tạo ra.

  1. PrivateSubUserForm_Activate() 2.3. EndSub Trong đó, sẽ viết code như list2.

  2. PrivateSubUserForm_Activate()

  3. ListBox1.AddItem("テキスト検索.html")

  4. ListBox1.AddItem("円を描く.html")

  5. ListBox1.AddItem("銀行.html")

  6. ListBox1.AddItem("道後温泉ルート検索.html")

  7. EndSub List2 Xử lý khi UserForm đã Activate

Đây là xử lý add thêm tên của các loại file「html」 bằng method AddItem của ListBox.

Xử lý khi chọn list box

Tiếp theo là xử lý khi「html」đã được add thêm ở list 2 được chọn. Trong trường hợp này, sẽ chọn「ListBox1」 từ dropdown list box trái hình 23, chọn「Change」 từ dropdown list box bên phải, viết  code như list 3 vào trong form đã được tạo.

  1. PrivateSubListBox1_Change()
  2. Dim selenium AsNewSeleniumWrapper.WebDriver
  3. selenium.Start"firefox","http://2008r2.projectkyss.net/selenium/"&ListBox1.Text
  4. selenium.Open"http://2008r2.projectkyss.net/selenium/"&ListBox1.Text
  5. selenium.Wait2000
  6. selenium.getScreenshot().Copy
  7. selenium.stop
  8. Sheets(1).Range("A10").PasteSpecial
  9. EndSub List 3 Xử lý khi item được chọn từ ListBox1

Bên trong event Change này sẽ sử dụng SeleniumWrapper.WebDriver đã set lúc trước.

Trước hết, ở line 1, tạo object selenium- là instance của SeleniumWrapper.WebDriver mới.

Ở line 2, chỉ định 「Firefox」 làm Web Browser cho đối số của method 「Start」, liên kết tên item đã được chọn từ ListBox1 với folder tên là 「selenium」 của 「http://2008r2.projectkyss.net」- là URL server của tác giả làm ví dụ, chỉ định cho đối số thứ 2.

Upload sẵn file 「html」 mà đã add thêm ở list 2 vào server của tác giả.

Đang mở file 「html」 đã được chọn từ ListBox bằng method「Open」ở line thứ 3. Ở line 4, đợi 2000 mi-li giây (2 giây) bằng method 「Wait」 đến khi hiển thị load hoàn toàn file「html」.

Sau đó, ở line 5, chụp screen shoot của Web site đã load bằng method「getScreenshot().Copy」. Ở line 6, stop instance, paste screen shoot đã chụp ở line 7 vào cell 「A10」bằng method「PasteSpecial」.

Xử lý khi mở form

Cuối cùng, chọn[挿入/Insert]→[標準モジュール/Module tiêu chuẩn], add thêm Module1, viết code của list 4 vào trong đó.

  1. OptionExplicit
  2. Subフォームを開く()
  3. UserForm1.Show vbModeless
  4. EndSub List 4 Code mở form

Mở UserForm1 bằng hiển thị modeless. Với「モードレス表示/Hiển thị Modeless」thì không thể thao tác trên Excel trong trường hợp form thông thường được hiển thị nhưng lại có thể thao tác trên Excel dù đang mở form trong trường hợp mở form bằng modeless.

Kết quả sau khi chạy macro list 4 này cùng với button「フォームを開く/Open form」ở hình 21 là hình 24.

Hình 24 Mở form bằng button 「フォームを開く/Open form」

Nếu chọn file「html」 từ listbox ở hình 24 thì Web site tương ứng sẽ được hiển thị trên Firefox. Screen shoot sẽ được chụp tự động, được paste vào cell「A10」 với size y nguyên. Ở Hình 25, tác giả chọn ảnh, thu nhỏ size, sắp xếp vào vị trí bất kỳ.

Hình 25 Chỉ định 「銀行.html」và 「道後温泉ルート検索.html」 từ list box rồi mở

Hãy làm thử nhiều lần với Selenium VBA

Nếu install sẵn Selenium VBA như trên thì có thể sử dụng「SeleniumWrapper」, giải quyết được vấn đề chụp screen shoot bằng tay rồi paste vào Excel.

Lần này, tạo form, up page 「html」 mà tác giả đã tạo vào server, cho load cái đó nhưng tôi nghĩ sẽ tương tự với form này trong trường hợp nhận từ client. Viết URL của page muốn confirm hoạt động vào trong VBA, cho hiển thị list bằng list box, chụp screen shoot bằng cách chọn từ đó rồi paste vào Excel cũng được.

Selenium VBA lần này thì có thể hiểu là sẽ tự động record Browsing của Web, rồi tái hiện cũng được. Vì process đã browsing sẽ được viết ra như là VBA nên có thể quản lý trên Excel. Nếu có thể quản lý trên Excel thì có thể tái hiện chuỗi flow của Web page đã tạo bằng VBA của Excel, rồi show cho client. Dẫu ý nghĩa như thế thì đây chẳng phải là một tool vô cùng thú vị sao?

Ngoài ra, command sử dụng chủ yếu lần này là 2 loại「Open」「clickAndWait」 nhưng tất nhiên cũng có thể chọn dropdown và nhập text nên mong các bạn hãy tự tìm hiểu rồi sử dụng thử dựa trên nội dung lần này nhé. Đặc biệt, tôi nghĩ có thể tham khảo blog dưới đây.

Lần tới, tôi sẽ giới thiệu Tips hữu ích với việc tự động get screen shoot

Lần này, mặc dù đã chụp screen shoot, paste vào Excel nhưng thực tế chỉ sử dụng thế thôi trong công việc thì chưa đủ. Ví dụ, nếu size ảnh quá lớn, thì cần phải thu nhỏ ảnh rồi set tất cả thành 1 size giống nhau, hay có trường hợp muốn chỉ định thời gian cho chạy tự động macro. Vì vậy, ở bài sau tôi sẽ giới thiệu vài Tips hữu ích với việc tự động hóa get screen shoot.

Nguồn:

http://www.atmarkit.co.jp/ait/articles/1408/21/news103.html