Hướng dẫn sử dụng IO Trình điều khiển Web Sử dụng Trang Web Trực tiếp và các Ví dụ về Thao tác: 8 Bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:35

Hướng dẫn IO Trình điều khiển Web Sử dụng Trang Web Trực tiếp và Các ví dụ Làm việc

Cập nhật lần cuối: 2015-07-26

(Kiểm tra lại thường xuyên khi tôi cập nhật tài liệu hướng dẫn này với nhiều chi tiết và ví dụ hơn)

Tiểu sử

Gần đây tôi đã có một thử thách thú vị được đưa ra cho tôi. Tôi cần giới thiệu tính năng kiểm tra tự động cho một bộ phận Q / A có rất ít kinh nghiệm kỹ thuật và không có kiến thức nền tảng về lập trình.

Đây thực sự là hai (2) thách thức riêng biệt. Đầu tiên là xác định các công nghệ để thực hiện kiểm tra tự động. Thứ hai là đào tạo bộ phận Q / A.

Bài viết sẽ chỉ đề cập đến các công nghệ được sử dụng và những gì tôi học được trong quá trình này.

Các công nghệ hoạt động tốt nhưng tôi thực sự phải tìm kiếm thông tin và dành nhiều giờ để tìm ra các vấn đề.

Tôi đã gặp khó khăn khi tìm kiếm thông tin trên Internet về các công nghệ này đều hoạt động cùng nhau.

Tôi muốn chia sẻ thông tin này, vì vậy tôi đã viết bài viết này cùng với các tập lệnh thử nghiệm mẫu đang làm việc và một trang web thử nghiệm để chạy các tập lệnh đó.

Tất cả các tập lệnh kiểm tra có thể được tìm thấy trên github và trang web kiểm tra đang hoạt động được đặt tại Trang web Kiểm tra Hướng dẫn IO của Trình điều khiển Web

Tôi hy vọng bạn thấy nó hữu dụng. Nếu bạn làm, xin vui lòng cho tôi biết.

Mục tiêu Sử dụng công nghệ để:

• Kiểm tra chức năng trang web
• Kiểm tra chức năng JavaScript
• Có thể chạy bằng tay
• Có thể chạy tự động

• Ngôn ngữ dễ học cho những người không phải là lập trình viên

  Nhân sự hỏi đáp có kiến thức cơ bản về HTML và JavaScript

• Chỉ sử dụng phần mềm nguồn mở

Công nghệ

Danh sách các công nghệ tôi chọn:

• mocha - người chạy thử nghiệm - thực hiện các tập lệnh thử nghiệm
• nênjs - thư viện khẳng định
• webdriverio - ràng buộc kiểm soát trình duyệt (ràng buộc ngôn ngữ)
• selen - nhà máy trừu tượng hóa và chạy trình duyệt

• Trình điều khiển Trình duyệt / Di động + trình duyệt

  • Firefox (Chỉ dành cho trình duyệt)
  • Chrome (Trình duyệt và trình điều khiển)
  • IE (Trình duyệt và trình điều khiển)
  • Safari (Trình duyệt và trình cắm trình điều khiển)

Bước 1: Cài đặt phần mềm

Để bắt đầu, bạn cần cài đặt máy chủ độc lập Node JS, Web Driver IO, Mocha, Should và Selenium.

Dưới đây là hướng dẫn cài đặt cho Windows 7.

(Tôi là người dùng Mac / Linux nhưng tôi phải cài đặt mọi thứ trên máy Windows 7, đây là lý do tại sao tôi đưa nó vào để bạn tham khảo. Quy trình cài đặt trên Mac / Linux cũng tương tự. Vui lòng tham khảo tài liệu tham khảo trực tuyến để biết thêm thông tin.)

Từ trình duyệt:

• Cài đặt Node bao gồm NPM (Node Package Manager)
• truy cập
  • Bấm cài đặt
  • Lưu và chạy tệp
  • Đặt đường dẫn và biến (NODE_PATH)

  • Đi tới Bảng điều khiển-> Hệ thống và Bảo mật-> Hệ thống

    • Thiết lập hệ thống nâng cao

    • Cài đặt môi trường (Biến người dùng)

      • Thêm vào PATH

        C: / Users {USERNAME} AppData / Roaming / npm;

      • Thêm NODE_PATH (Biến hệ thống)

        C: / Users {USERNAME} AppData / Roaming / npm / node_modules

Lưu ý: Tôi đã cài đặt tất cả phần mềm bên dưới bằng tùy chọn npm global (-g). Điều này thường không được khuyến nghị nhưng đối với cài đặt này, tôi cần cài đặt trên toàn cầu vì nó sẽ được sử dụng trên nhiều dự án.

Mở dấu nhắc lệnh (cmd):

(quản trị viên người dùng cục bộ)

• Cài đặt selenium "trình điều khiển web IO"

  • npm cài đặt webdriverio -g

    Thao tác này sẽ cài đặt IO trình điều khiển web trên toàn cầu trên máy của bạn

• Cài đặt phần mềm chạy thử “mocha”

  • npm cài đặt mocha -g

    Thao tác này sẽ cài đặt mocha trên toàn cầu trên máy của bạn

• Cài đặt thư viện xác nhận "nên"

  • npm cài đặt nên -g

    Thao tác này sẽ cài đặt “should” trên toàn cầu trên máy của bạn

• Cài đặt Selenium Stand Alone Server

  • Truy cập
  • Tải xuống tệp jar và chuyển vào thư mục “selen”.
• Cài đặt trình duyệt và trình điều khiển trình duyệt để kiểm tra

  • Từ dấu nhắc cmd:

    • Tạo thư mục "selen"
    • C: / Users {USERNAME} selen

    • Lệnh:

      • cd C: / Users {USERNAME}
      • mkdir selen

    • Firefox

      • Cài đặt trình duyệt firefox, nếu chưa được cài đặt.
      • Đường dẫn phải được đặt để khởi động Firefox từ dấu nhắc lệnh (cmd).

      • Bảng điều khiển-> Hệ thống và Bảo mật-> Hệ thống

        • Thiết lập hệ thống nâng cao
        • Cài đặt môi trường
        • Thêm (nối sử dụng dấu chấm phẩy) vào Biến đường dẫn
        • C: / Program Files (x86) Mozilla Firefox
      • Không cần trình điều khiển web đặc biệt cho Firefox.

    • Trình duyệt Chrome

      • Cài đặt trình duyệt chrome, nếu chưa được cài đặt.
      • Đường dẫn CÓ THỂ được đặt để khởi động Chrome từ dấu nhắc lệnh (cmd).
      • Kiểm tra trước: chrome.exe từ dấu nhắc lệnh (cmd)
      • Nếu chrome không khởi động thì:

      • Bảng điều khiển-> Hệ thống và Bảo mật-> Hệ thống

        • Thiết lập hệ thống nâng cao
        • Cài đặt môi trường
        • Thêm (nối sử dụng dấu chấm phẩy) vào Biến đường dẫn
        • C: / Program Files (x86) Google / Chrome / Application / chrome.exe

      • Trình điều khiển web đặc biệt là cần thiết cho Chrome.

        Truy cập chromium.org và giải nén trình điều khiển 32 bit vào thư mục “selen”

    • Internet Explorer (chỉ dành cho Windows - sẽ không hoạt động trên các nền tảng khác)

      • Trình điều khiển web đặc biệt là cần thiết cho IE.

        • Truy cập
        • Tải xuống và giải nén trình điều khiển 64 bit vào thư mục “selen”.

Bước 2: Tập lệnh thử nghiệm cơ bản

Hãy bắt đầu với một số điều cơ bản.

Đây là một tập lệnh mocha đơn giản sẽ mở một trang web và xác minh tiêu đề.

// tutorial1.js

// // Đây là một script thử nghiệm đơn giản để mở một trang web và // xác thực tiêu đề. // các thư viện bắt buộc var webdriverio = request ('webdriverio'), should = request ('should'); // khối tập lệnh kiểm tra hoặc mô tả bộ ('Title Test for Web Driver IO - Trang web của trang Tutorial Test', function () {// đặt thời gian chờ là 10 giây this.timeout (10000); var driver = {}; // hook to run before tests before (function (done) {// tải trình điều khiển cho trình điều khiển trình duyệt = webdriverio.remote ({mong muốn Khả năng: {browserName: 'firefox'}}); driver.init (done);}); // một thông số kiểm tra - "đặc điểm kỹ thuật" nó ('nên tải trang và tiêu đề chính xác', function () {// tải trang, sau đó gọi hàm () trả về trình điều khiển.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // lấy tiêu đề, sau đó chuyển tiêu đề cho function ().getTitle (). then (function (title) {// xác minh tiêu đề (title).should.be.equal ("Web Driver IO - Trang hướng dẫn kiểm tra "); // bỏ ghi chú cho console debug // console.log ('Tiêu đề trang hiện tại:' + title);});}); // một" hook "để chạy sau tất cả các thử nghiệm trong khối này after (function (done) {driver.end (xong);});});

Quan sát:

• Trước tiên, bạn sẽ thấy kịch bản thử nghiệm được viết bằng JAVASCRIPT (kết thúc bằng phần mở rộng.js).

• Cấu trúc cơ bản gần như giống hệt nhau cho tất cả các tập lệnh thử nghiệm.

  • Nhận xét Tiêu đề (//)
  • Thư viện bắt buộc
  • Đặt tùy chọn (tùy chọn)
  • Hook: Tải trình điều khiển trình duyệt
  • Bộ thử nghiệm (mô tả)
  • Thông số kỹ thuật kiểm tra (có thể là nhiều Thông số kỹ thuật trong một Suite)
  • Hook: Dọn dẹp

• Bộ thử nghiệm bắt đầu với một hàm mô tả có hai tham số:

  • Chuỗi - Mô tả bộ thử nghiệm

    • "Kiểm tra trang để biết xung quanh thích hợp"
    • “Xác minh hoạt động của nút radio”

  • hàm - khối mã để thực thi

    description (‘Mô tả bộ thử nghiệm’, function () {});

• Bộ thử nghiệm sẽ chứa 1 hoặc nhiều thông số kỹ thuật (đặc điểm kỹ thuật)

• Các thông số kỹ thuật bắt đầu bằng hàm nó nhận hai tham số:

  • Chuỗi - Mô tả đặc điểm kỹ thuật thử nghiệm

    • “Phải là văn bản liên kết chính xác và URL liên kết"
    • “Nên chứa nội dung chính xác (sao chép bộ bài)
  • hàm - khối mã để thực thi
  • it (‘Mô tả đặc tả thử nghiệm’, function () {});
• Một thông số kỹ thuật chứa một hoặc nhiều kỳ vọng kiểm tra trạng thái của mã

• Đây được gọi là các xác nhận

  Thư viện "nên" cung cấp các xác nhận

• Trong hầu hết các trường hợp, bạn sẽ cần xác định vị trí một hoặc nhiều phần tử bằng bộ chọn, sau đó thực hiện một số thao tác trên (các) phần tử

  • Ví dụ:

    • Tìm văn bản trên một trang và xác minh văn bản
    • Điền biểu mẫu và gửi
    • Xác minh CSS của một phần tử

Chúng ta hãy xem xét kỹ hơn ví dụ với các nhận xét

Tải các thư viện cần thiết: IO trình điều khiển web và nên.

// thư viện bắt buộc

var webdriverio = request ('webdriverio'), should = request ('should');

Xác định bộ thử nghiệm. Bộ phần mềm này có tên là: "Title Test for Web Driver IO - Tutorial Test Page Website"

// khối hoặc bộ tập lệnh thử nghiệm

description ('Tiêu đề Kiểm tra IO Trình điều khiển Web - Trang web Trang Kiểm tra Hướng dẫn', function () {…});

Đặt thời gian chờ thành 10 giây để tập lệnh không hết thời gian chờ khi tải trang.

// đặt thời gian chờ thành 10 giây

this.timeout (10000);

Móc để tải trình điều khiển trình duyệt trước khi chạy các thông số kỹ thuật "specs". Trình điều khiển Firefox được tải trong ví dụ này.

// hook để chạy trước các bài kiểm tra

before (function (done) {// tải trình điều khiển cho browser driver = webdriverio.remote ({mong muốn Khả năng: {browserName: 'firefox'}}); driver.init (done);});

Xác định đặc điểm kỹ thuật thử nghiệm.

// một thông số kiểm tra - "đặc điểm kỹ thuật"

it ('nên tải đúng trang và tiêu đề', function () {…});

Tải trang web

.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html')

Nhận tiêu đề, sau đó chuyển tiêu đề cho hàm ()

.getTitle (). then (function (title) {

… });

Xác minh tiêu đề bằng cách sử dụng thư viện xác nhận nên.

(title).should.be.equal ("Web Driver IO - Trang hướng dẫn kiểm tra");

Hook để thoát và dọn dẹp trình điều khiển khi hoàn tất.

// một "hook" để chạy sau tất cả các lần kiểm tra trong khối này

after (function (done) {driver.end (done);});

Bước 3: Chạy tập lệnh thử nghiệm

Bây giờ chúng ta hãy xem tập lệnh thử nghiệm làm gì khi nó được chạy.

Đầu tiên hãy khởi động Máy chủ Selenium Stand Alone:

• Đối với Windows, sử dụng dòng lệnh (cmd):

  • java -jar
  • # java -jar selenium-server-standalone-2.46.0.jar

• Đối với Mac hoặc Linux, hãy mở terminal:

  • java -jar
  • $ java -jar selenium-server-standalone-2.46.0.jar
• Xem ảnh chụp màn hình ở trên

Tiếp theo chạy tập lệnh thử nghiệm:

• Đối với Windows sử dụng dòng lệnh (cmd):

  • mocha
  • # mocha tutorial1.js

• Đối với Mac hoặc Linux, hãy mở terminal:

  • mocha
  • $ mocha tutorial.js
• Xem ảnh chụp màn hình ở trên

Vậy chuyện gì đã xảy ra?

Mocha gọi tập lệnh "tutorial1.js". Trình điều khiển đã khởi động trình duyệt (Firefox), tải trang và xác minh tiêu đề.

Bước 4: Trang web mẫu

Tất cả các ví dụ được chạy trên trang web này.

Trang web mẫu có tại: Trang Hướng dẫn Kiểm tra IO Trình điều khiển Web

Tất cả các tập lệnh thử nghiệm có thể được tải xuống từ github.

Bước 5: Ví dụ cụ thể

Tất cả mã có sẵn trên github: Hướng dẫn IO Trình điều khiển Web trên github

• Xác minh Liên kết và Văn bản Liên kết trong danh sách không có thứ tự - "linkTextURL1.js"

  • Danh sách không có thứ tự có một và liên kết là mục danh sách thứ 4.
  • URL phải là "https://tlkeith.com/contact.html"

// Xác minh văn bản liên kết Liên hệ với chúng tôi

it ('nên chứa văn bản liên kết Liên hệ với chúng tôi', function () {return driver.getText ("// ul [@ id = 'mylist'] / li [4] / a"). then (function (link) {console.log ('Liên kết tìm thấy:' + liên kết); (liên kết).should.equal ("Liên hệ với chúng tôi");});}); // Xác minh URL Liên hệ với chúng tôi nó ('nên chứa URL Liên hệ với chúng tôi', function () {return driver.getAttribute ("// ul [@ id = 'mylist'] / li [4] / a", "href").then (function (link) {(link).should.equal ("https://tlkeith.com/contact.html"); console.log ('URL tìm thấy:' + link);});});

• Xác minh Văn bản Bản quyền - "Copyright1.js"

  • Bản quyền nằm ở chân trang Ví dụ này cho thấy 2 cách khác nhau để định vị văn bản bản quyền:

    • bởi as the element selector
    • bằng cách sử dụng xpath làm bộ chọn phần tử

// Xác minh văn bản Bản quyền bằng cách sử dụng id làm bộ chọn phần tử

it ('nên chứa văn bản Bản quyền', function () {return driver.getText ("# copyright"). then (function (link) {console.log ('Copyright found:' + link); (link).should. bằng ("Tony Keith - tlkeith.com @ 2015 - Mọi quyền được bảo lưu.");});}); // Xác minh văn bản Bản quyền bằng cách sử dụng xpath làm bộ chọn phần tử ('nên chứa văn bản Bản quyền', function () {return driver.getText ("// footer / center / p"). Then (function (link) {console.log ('Đã tìm thấy bản quyền:' + link); (link).should.equal ("Tony Keith - tlkeith.com @ 2015 - Mọi quyền được bảo lưu.");});});

• Điền các trường biểu mẫu và gửi - "formFillSubmit1.js"

  • Điền họ, tên và gửi, sau đó chờ kết quả.

  • Ví dụ này cho thấy 3 phương pháp điền vào trường nhập tên đầu tiên:

    • theo id
    • bởi xpath từ đầu vào
    • bởi xpath từ biểu mẫu-> đầu vào
  • Đồng thời cho biết cách xóa một trường đầu vào

// Đặt tên đầu tiên sử dụng id thành: Tony

it ('nên đặt tên thành Tony', function () {return driver.setValue ("# fname", "Tony").getValue ("# fname"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("Tên:" + e);});}); // Xóa tên bằng id it ('nên xóa tên', function () {return driver.clearElement ("# fname").getValue ("# fname"). Then (function (e) {(e).should.be.equal (""); console.log ("Tên:" + e);});}); // Đặt tên bằng xpath từ đầu vào thành: Tony it ('nên đặt tên thành Tony', function () {return driver.setValue ("// input [@ name = 'fname']", "Tony").getValue ("// input [@ name = 'fname']"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("First Name:" + e);});}); // Xóa tên bằng xpath khỏi đầu vào nó ('nên xóa tên', function () {return driver.clearElement ("// input [@ name = 'fname']").getValue ("// input [@ name = 'fname'] "). then (function (e) {(e).should.be.equal (" "); console.log (" First Name: "+ e);});}); // Đặt tên bằng xpath từ biểu mẫu thành: Tony it ('nên đặt tên thành Tony', function () {return driver.setValue ("// form [@ id = 'search-form'] / input [1] "," Tony ").getValue (" // form [@ id = 'search-form'] / input [1] "). Then (function (e) {(e).should.be.equal ("Tony"); console.log ("Tên:" + e);});}); // Đặt họ bằng id thành: Keith it ('nên đặt họ thành Keith', function () {return driver.setValue ("# lname", "Keith").getValue ("# lname"). Then (function (e) {(e).should.be.equal ("Keith"); console.log ("Họ:" + e);});}); // Gửi biểu mẫu và đợi kết quả tìm kiếm nó ('nên gửi biểu mẫu và đợi kết quả', function () {return driver.submitForm ("# search-form"). Then (function (e) {console.log (' Gửi Biểu mẫu Tìm kiếm ');}).waitForVosystem ("# search-results", 10000).then (function (e) {console.log (' Search Results Found ');});});

• Nhấp vào Nút Hiển thị / Ẩn và Xác minh Văn bản - "showHideVerify1.js"

  • Văn bản nằm trong phần tử hiển thị / ẩn. Nút kiểm soát trạng thái.

  • Ví dụ này cho thấy:

    • Nhấp vào nút để mở rộng
    • Chờ phần tử hiển thị (mở rộng)
    • Xác minh văn bản (sao chép bộ bài)

// nhấp vào nút "Thông tin khác" và xác minh văn bản trong phần tử mở rộng

it ('nên nhấp vào nút thông tin khác và xác minh văn bản', function () {return driver.click ("# moreinfo"). then (function () {console.log ('Nhấp vào nút Thông tin khác');}).waitForVible ("#collapseExample", 5000).getText ("// div [@ id = 'fallExample'] / div"). then (function (e) {console.log ('Text:' + e); (e).should.be.equal ("Mọi điều tốt đẹp hãy đến đây!");});});

• Xác thực các lỗi trường biểu mẫu - "formFieldValidation.js"

  • Sử dụng các tập lệnh kiểm tra để xác minh các thông báo lỗi chính xác được tạo ra.

  • Ví dụ này cho thấy:

    Xác minh các tin nhắn văn bản lỗi và xác minh vị trí (vị trí danh sách không có thứ tự)

it ('nên chứa 5 lỗi: đầu tiên / cuối cùng / địa chỉ / thành phố / tiểu bang', function () {

return driver.getText ("// ul [@ class = 'alert alert-risk'] / li [1]"). then (function (e) {console.log ('Đã tìm thấy lỗi:' + e); (e).should.be.equal ('Vui lòng nhập tên');}).getText ("// ul [@ class = 'alert alert-risk'] / li [2]"). then (function (e) {console.log ('Đã tìm thấy lỗi:' + e); (e).should.be.equal ('Vui lòng nhập họ');}).getText ("// ul [@ class = 'alert alert-risk '] / li [3] "). then (function (e) {console.log (' Đã tìm thấy lỗi: '+ e); (e).should.be.equal (' Vui lòng nhập địa chỉ ');}). getText ("// ul [@ class = 'alert alert-risk'] / li [4]"). then (function (e) {console.log ('Error found:' + e); (e).should.be.equal ('Vui lòng nhập thành phố');}).getText ("// ul [@ class = 'alert alert-risk'] / li [5]"). then (function (e) {console.log ('Tìm thấy lỗi:' + e); (e).should.be.equal ('Vui lòng nhập trạng thái');}); });

• Vòng lặp dữ liệu để xác thực liên kết URL / Văn bản / Trang - "LoopDataExample1.js"

  • Ví dụ này cho thấy: Sử dụng một mảng dữ liệu JSON để lưu trữ liên kết và tên, sau đó lặp lại

    • Xác minh từng văn bản URL và liên kết
    • Nhấp vào liên kết và tải trang

// Liên kết dữ liệu - liên kết và văn bản

var linkArray = [{"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/tutorial1.js", "name": "tutorial1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/linkTextURL1.js "," name ":" linkTextURL1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/ master / copyright1.js "," name ":" copyright1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFillSubmit1.js "," name ":" formFillSubmit1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/showHideVerify1.js "," name ":" showHideVerify1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/dynamicBrowser.js "," name ":" dynamicBrowser.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/ blob / master / callbackPromise.js "," name ":" callbackPromise.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/debugExample1.js "," name ": "debu gExample1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFieldValidation.js "," name ":" formFieldValidation.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/common/commonLib.js "," name ":" commonLib.js "}, {" link ":" https://github.com/onewithhammer/ WebDriverIOTutorial / blob / master / dataLoopExample1.js "," name ":" dataLoopExample1.js "}]; … // lặp qua từng linkArray linkArray.forEach (function (d) {it ('should chứa text / link then goto page -' + d.name, function () {return driver // đảm bảo rằng bạn đang ở trang bắt đầu.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). then (function (title) {// verify title (tiêu đề).should.be.equal ("Trình điều khiển Web IO - Trang Kiểm tra Hướng dẫn ");}) // tìm URL.getAttribute ('a =' + d.name," href "). Then (function (link) {(link).should.equal (d.link); console.log ('URL tìm thấy:' + d.link);}) // truy cập trang URL và xác minh rằng nó tồn tại.click ('a =' + d.name).waitForVosystem ("# js-repo-pjax- container ", 10000).then (function () {console.log ('Github Page Found');});});});

• Vòng lặp dữ liệu tĩnh để điền vào trường biểu mẫu - "loopDataExample2.js"

  • Ví dụ này cho thấy: Sử dụng một mảng dữ liệu JSON để lưu trữ họ / tên

    • Lặp qua dữ liệu để điền các trường biểu mẫu, sau đó gửi biểu mẫu
    • Chờ trang kết quả
    • Xác minh họ / tên trên trang kết quả

// mảng dữ liệu - firstName và lastNamevar dataArray = [{"firstName": "Tony", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"firstName" ":" Jane "," lastName ":" Doe "}, {" firstName ":" Don "," lastName ":" Johnson "}]; … // lặp qua từng dataArray dataArray.forEach (function (d) {it ('nên điền các trường, trang sumbit', function () {return driver // đảm bảo rằng bạn đang ở trang bắt đầu.url ('http: / /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). then (function (title) {// verify title (tiêu đề).should.be.equal ("Web Driver IO - Tutorial Test Page");}).setValue ("# fname", d.firstName).getValue ("# fname"). then (function (e) {(e).should.be.equal (d.firstName); console.log ("First Tên: "+ e);}).setValue (" # lname ", d.lastName).getValue (" # lname "). Then (function (e) {(e).should.be.equal (d.lastName); console.log ("Họ:" + e);}).submitForm ("# search-form"). then (function () {console.log ('Gửi Biểu mẫu Tìm kiếm');}).waitForVbroken ("# search-results", 10000).then (function () {console.log ('Tìm thấy Trang Kết quả');}).getText ("// h1"). then (function (link) {console.log ('Văn bản được tìm thấy:' + link); (link).should.equal ("Chào mừng" + d.firstName + "" + d.lastName + ".");});});});

• Xác thực thuộc tính CSS - "cssValidation1.js"

  • Ví dụ này cho thấy cách:

    • Xác thực các thuộc tính CSS sau:

      • màu sắc
      • padding (trên, dưới, phải, trái)
      • màu nền

it ('nên chứa màu chính xác của văn bản lỗi', function () {return driver.getCssProperty ("// ul [@ class = 'alert alert-risk'] / li [1]", "color"). then (function (result) {console.log ('Màu tìm thấy:' + result.parsed.hex + "hoặc" + result.value); (result.parsed.hex).should.be.equal ('# a94442'); });});

it ('nên chứa phần đệm chính xác trong ô bảng', function () {

return driver // padding: trên cùng bên phải dưới cùng bên trái.getCssProperty ("// table [@ id = 'filelist'] / thead / tr [1] / td [1]", "padding-top"). then (function (result) {console.log ('padding-top found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// table [@ id = 'filelist'] / thead / tr [1] / td [1] "," padding-bottom "). then (function (result) {console.log ('padding-bottom found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// table [@ id = 'filelist'] / thead / tr [1] / td [1]", "padding- right "). then (function (result) {console.log ('padding-right found:' + result.value); (result.value).should.be.equal ('5px');}).getCssProperty ("// table [@ id = 'filelist'] / thead / tr [1] / td [1]", "padding-left"). then (function (result) {console.log ('padding-left found: '+ result.value); (result.value).should.be.equal (' 5px ');}); });

it ('nên chứa màu nền chính xác trong tiêu đề bảng', function () {

return driver.getCssProperty ("// table [@ id = 'filelist'] / thead", "background-color"). then (function (result) {console.log ('background color found:' + result.parsed). hex); (result.parsed.hex).should.be.equal ('# eeeeee');}); });

Bước 6: Mẹo và thủ thuật

• Gỡ lỗi:

  • Bật ghi nhật ký ở cấp trình điều khiển để gỡ lỗi nhiều hơn và tạo nhật ký.

    • Đặt logLevel thành 'verbose'
    • Đặt logOutput thành tên thư mục ('nhật ký')

driver = webdriverio.remote (loglevel: 'verbose', logOutput: 'logs', {mong muốnCapabilities: {browserName: 'firefox'}});

• Sử dụng console.log (), debug (), getText () để gỡ lỗi.

  • console.log () - Sử dụng để hiển thị thông tin để xác định trạng thái.
  • debug () - Sử dụng trình duyệt / tập lệnh tạm dừng cho đến khi nhấn enter trên dòng lệnh.

  • getText () - Sử dụng để xác minh rằng bạn đang tương tác với phần tử chính xác.

    Đặc biệt hữu ích với các biểu thức xpath

// Nhấp vào Mục 3 từ danh sách

it ('nên nhấp vào Mục 3 từ danh sách', function () {// sử dụng getText () để xác minh xpath là đúng cho trình điều khiển trả về phần tử.getText ("// ul [@ id = 'mylist'] / li [3] / div / div / a "). Then (function (link) {// sử dụng console.log () để xuất thông tin console.log ('Link found:' + link); (link).should.equal ("Item 3");}) // sử dụng debug () để dừng hành động để xem điều gì đang xảy ra trên trình duyệt.debug ().click ("// ul [@ id = 'mylist'] / li [3] /div/div/a").then (function () {console.log ('Liên kết được nhấp vào');}) // đợi biểu mẫu tìm kiếm của google xuất hiện.waitForVosystem ("# tsf", 20000).then (function (e) {console.log ('Tìm thấy Kết quả Tìm kiếm');});});

• Sử dụng biến môi trường để thay đổi động trình duyệt:

  • Sử dụng biến môi trường SELENIUM_BROWSER để gọi một trình duyệt khác mà không cần sửa đổi tập lệnh thử nghiệm mỗi lần.
  • Yêu cầu một chút thay đổi mã hóa để hỗ trợ.

Thay đổi mã:

// tải trình điều khiển cho trình duyệt

driver = webdriverio.remote ({mong muốn Khả năng: {browserName: process.env. SELENIUM_BROWSER || 'chrome'}});

Các trình duyệt được hỗ trợ:

• Internet Explorer - IE 8+ (Chỉ dành cho Windows)

  SELENIUM_BROWSER = tức là mocha

• Firefox 10+ (Windows / Max / Linux)

  SELENIUM_BROWSER = firefox mocha

• Chrome 12+ (Windows / Max / Linux)

  SELENIUM_BROWSER = chrome mocha

• Opera 12+

  SELENIUM_BROWSER = opera mocha

• Safari

  SELENIUM_BROWSER = safari mocha

Thử nghiệm:

• Đối với Windows, sử dụng git bash shell:

  • SELENIUM_BROWSER = chrome mocha
  • $ SELENIUM_BROWSER = chrome mocha DynamicBrowser.js

• Đối với Mac hoặc Linux, hãy mở terminal:

  • SELENIUM_BROWSER = chrome mocha
  • $ SELENIUM_BROWSER = chrome mocha DynamicBrowser.js

• Kiểm tra đáp ứng:

  • Xác định các điểm ngắt dựa trên dự án hoặc khuôn khổ (tức là bootstrap).

  • Xác định các biến môi trường cho mỗi điểm ngắt:

    • DESKTOP - 1200 px
    • TABLET - 992 px
    • DI ĐỘNG - 768 pixel

  • Phát triển một lệnh có thể sử dụng lại để đọc biến môi trường và đặt kích thước trình duyệt.

    Xem ví dụ bên dưới

  • Gọi lệnh có thể sử dụng lại trong tập lệnh thử nghiệm của bạn.

// mã có thể sử dụng lại - thư viện // đoạn mã if (bp == "DESKTOP") {obj.width = 1200; obj.height = 600; obj.name = bp; } else if (bp == "TABLET") {obj.width = 992; obj.height = 600; obj.name = bp; } else if (bp == "MOBILE") {obj.width = 768; obj.height = 400; obj.name = bp; }

// Tập lệnh thử nghiệm

before (function (done) {wonize = common.getWindowSizeParams ();… driver.addCommand ('setWindowSize', common.setWindowSize.bind (driver));} // đặt kích thước cửa sổ nó ('nên đặt kích thước cửa sổ', function (done) {// chỉ chiều rộng mới quan trọng driver.setWindowSize (wonize.width, wonize.height, function () {}). call (done);});

• Các lệnh có thể tái sử dụng (Lệnh tùy chỉnh):

  • Web Driver IO có thể dễ dàng mở rộng.
  • Tôi thích đặt tất cả các lệnh có thể tái sử dụng vào một thư viện. (có thể đây là trường cũ nhưng nó hoạt động!)

common / commonLib.js

// verifyLastNameCheckError ()

// // Mô tả: // Xác minh thông báo lỗi xác thực biểu mẫu họ tên // // Đầu vào: // số - chỉ mục của lỗi (1-5) // Đầu ra: // none // var verifyLastNameCheckError = function () { var idx = objects [0], callback = architects [đối số.length - 1]; this.getText ("// ul [@ class = 'alert alert-risk'] / li [" + idx + "]", function (err, e) {console.log ('Đã tìm thấy lỗi:' + e); (e).should.be.equal ('Vui lòng nhập họ');}).call (gọi lại); }; // xuất hàm module.exports.verifyLastNameCheckError = verifyLastNameCheckError;

Dưới đây là những thay đổi cụ thể cần thiết để gọi một hàm có thể sử dụng lại

Xem formFieldValidation.js để biết ví dụ làm việc hoàn chỉnh

// yêu cầu lệnh có thể sử dụng lại - CommonLib

common = request ('./ Common / CommonLib'); … // ràng buộc các lệnh driver.addCommand ('verifyFirstNameError', common.verifyFirstNameCheckError.bind (driver)); driver.addCommand ('verifyLastNameError', common.verifyLastNameCheckError.bind (trình điều khiển)); it ('nên chứa 2 lỗi: họ / tên', function () {// gọi trình điều khiển hàm có thể sử dụng lại.verifyFirstNameError (1);.verifyLastNameError (2);});

• Cấu trúc tệp / thư mục dự án:

  • Đây là cấu trúc dự án điển hình:

    • "Dự án" - thư mục dự án chính

      • README.md - readme cho dự án toàn cầu

      • "Chung" - thư mục cho các chức năng chung cho tất cả các dự án

        • common-lib.js - thư viện hàm toàn cầu
        • README.md - readme cho các hàm toàn cục

      • "Sản phẩm1" - thư mục cho sản phẩm 1

        • test-script1.js
        • test-script2.js

        • "Chung" - thư mục cho các chức năng cục bộ của dự án 1

          • prod1-lib.js - thư viện hàm cục bộ cho dự án 1
          • README.md - readme cho các chức năng cục bộ để chiếu 1

      • "Product2" - thư mục cho sản phẩm 2test-script1.jstest-script2.js

        • "Chung" - thư mục cho các chức năng cục bộ của dự án 2

          • prod2-lib.js - thư viện hàm cục bộ cho dự án 2
          • README.md - readme cho các chức năng cục bộ của dự án 2

• Chia nhỏ các tập lệnh thử nghiệm thành nhiều tệp:

  • Đây là một ví dụ về việc sử dụng nhiều tệp:

    • Sanity Check - tập lệnh kiểm tra cơ bản để xác minh mọi thứ đang hoạt động
    • Xác thực văn bản và yếu tố tĩnh - xác minh tất cả các yếu tố và văn bản
    • Xác thực lỗi biểu mẫu / trang - xác thực lỗi
    • Kết quả tìm kiếm - kiểm tra nội dung động

• Gọi lại VS. Lời hứa:

  • Phiên bản 3 của Web Driver IO hỗ trợ cả lệnh gọi lại và lời hứa.

    Hứa hẹn là phương pháp ưa thích vì nó làm giảm mã xử lý lỗi. Vui lòng xem bên dưới cùng một ví dụ được viết bằng lệnh gọi lại và lời hứa.

Gọi lại

// Đặt / xác minh họ / tên bằng Gọi lại

it ('nên đặt / xác minh họ / tên bằng Callbacks', function (done) {driver.setValue ("# fname", "Tony", function (e) {driver.getValue ("# fname", function (err, e) {(e).should.be.equal ("Tony"); console.log ("First Name:" + e); driver.setValue ("# lname", "Keith", function (e) { driver.getValue ("# lname", function (err, e) {(e).should.be.equal ("Keith"); console.log ("Họ:" + e); done ();});});});});});

Lời hứa

// Đặt / xác minh họ / tên bằng Lời hứa

it ('nên đặt / xác minh họ / tên bằng Promises', function () {return driver.setValue ("# fname", "Tony").getValue ("# fname"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("First Name:" + e);}).setValue ("# lname", "Keith").getValue ("# lname"). then (function (e) {(e).should.be.equal ("Keith"); console.log ("Họ:" + e);});});

Bước 7: Thêm tài nguyên

Dưới đây là một số tài nguyên bổ sung để bạn tham khảo:

• Nhóm thảo luận (Gitter)

  • Nhóm thảo luận IO về trình điều khiển web
  • Nhóm thảo luận Mocha

• Các dự án thú vị khác

  • Supertest - Xác nhận
  • Chai - khẳng định

Bước 8: Kết luận

Tôi đã dành thời gian nghiên cứu các công nghệ để sử dụng cho dự án của mình. Ban đầu tôi bắt đầu với Selenium Web Driver nhưng đã chuyển sang sử dụng Web Driver IO. Web Driver IO dường như dễ sử dụng hơn và dễ mở rộng hơn nhiều (ít nhất là tài liệu để mở rộng - các lệnh có thể sử dụng lại tốt hơn).

Khi tôi lần đầu tiên bắt đầu xem xét các công nghệ, thật khó để tìm thấy những ví dụ điển hình liên quan đến bất cứ điều gì tôi đang cố gắng làm. Đây là lý do tôi muốn chia sẻ thông tin và kiến thức này với bạn.

Các công nghệ hoạt động tốt hơn nhiều so với tôi mong đợi, tuy nhiên, có liên quan đến đường cong học tập. Khi tôi hiểu tất cả các thành phần hoạt động cùng nhau như thế nào, tôi đã có thể viết các kịch bản thử nghiệm phức tạp trong một thời gian rất ngắn. Các tập lệnh khó nhất là các thành phần dựa trên JavaScript như bộ chọn ngày và bộ chọn phương thức.

Tôi chưa bao giờ tự cho mình là một nhà phát triển JavaScript và tôi cũng không muốn trở thành chuyên gia JavaScript, nhưng việc sử dụng những công nghệ này chắc chắn đã thúc đẩy tôi trau dồi kỹ năng JS của mình.

Tôi hy vọng bài viết này hữu ích và các ví dụ rõ ràng và đầy đủ thông tin.

Vui lòng cho tôi biết nếu bạn có bất kỳ câu hỏi hoặc nhận xét nào.

Cảm ơn bạn, Tony Keith