การสอน IO ของไดรเวอร์เว็บโดยใช้เว็บไซต์สดและตัวอย่างการทำงาน: 8 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:07

การสอน IO ของไดรเวอร์เว็บโดยใช้เว็บไซต์สดและตัวอย่างการทำงาน

Last Update: 2015-26-07

(กลับมาตรวจสอบบ่อยครั้งในขณะที่ฉันอัปเดตคำแนะนำนี้พร้อมรายละเอียดและตัวอย่างเพิ่มเติม)

พื้นหลัง

ฉันเพิ่งมีความท้าทายที่น่าสนใจนำเสนอให้ฉัน ฉันจำเป็นต้องแนะนำการทดสอบอัตโนมัติให้กับแผนก Q/A โดยมีประสบการณ์ด้านเทคนิคเพียงเล็กน้อยและไม่มีพื้นฐานด้านการเขียนโปรแกรม

นี่เป็นความท้าทายสอง (2) ที่แยกจากกันจริงๆ ประการแรกคือการระบุเทคโนโลยีเพื่อทำการทดสอบอัตโนมัติ ประการที่สองคือการฝึกอบรมแผนก Q/A

บทความนี้จะกล่าวถึงเฉพาะเทคโนโลยีที่ใช้และสิ่งที่ฉันได้เรียนรู้ในกระบวนการนี้

เทคโนโลยีทำงานได้ดี แต่ฉันต้องค้นหาข้อมูลและใช้เวลาหลายชั่วโมงในการค้นหาปัญหา

ฉันมีช่วงเวลาที่ยากลำบากในการค้นหาข้อมูลบนอินเทอร์เน็ตเกี่ยวกับเทคโนโลยีเหล่านี้ที่ทำงานร่วมกันทั้งหมด

ฉันต้องการแบ่งปันข้อมูลนี้ ดังนั้นฉันจึงเขียนบทความนี้พร้อมกับตัวอย่างสคริปต์ทดสอบที่ทำงานและเว็บไซต์ทดสอบเพื่อเรียกใช้สคริปต์

สคริปต์ทดสอบทั้งหมดสามารถพบได้บน github และไซต์ทดสอบการทำงานอยู่ที่ Web Driver IO Tutorial Test Site

ฉันหวังว่าคุณพบว่ามีประโยชน์. ถ้าคุณทำโปรดแจ้งให้เราทราบ

วัตถุประสงค์ใช้เทคโนโลยีเพื่อ:

• ทดสอบการทำงานของเว็บไซต์
• ทดสอบการทำงานของ JavaScript
• สามารถเรียกใช้ด้วยตนเอง
• สามารถเรียกใช้โดยอัตโนมัติ

• ภาษาที่เรียนรู้ได้ง่ายสำหรับผู้ที่ไม่ใช่โปรแกรมเมอร์

  บุคลากร Q/A ที่มีความรู้พื้นฐานเกี่ยวกับ HTML และ JavaScript

• ใช้ซอฟต์แวร์โอเพ่นซอร์สเท่านั้น

เทคโนโลยี

รายการเทคโนโลยีที่ฉันเลือก:

• มอคค่า – ตัวทดสอบ - รันสคริปต์ทดสอบ
• shouldjs – ไลบรารีการยืนยัน
• webdriverio – การเชื่อมโยงการควบคุมเบราว์เซอร์ (การผูกภาษา)
• ซีลีเนียม – สิ่งที่เป็นนามธรรมของเบราว์เซอร์และการทำงานจากโรงงาน

• เบราว์เซอร์/ไดรเวอร์มือถือ + เบราว์เซอร์

  • Firefox (เบราว์เซอร์เท่านั้น)
  • Chrome (เบราว์เซอร์และไดรเวอร์)
  • IE (เบราว์เซอร์และไดรเวอร์)
  • Safari (ปลั๊กอินเบราว์เซอร์และไดรเวอร์)

ขั้นตอนที่ 1: การติดตั้งซอฟต์แวร์

ในการเริ่มต้น คุณต้องติดตั้งเซิร์ฟเวอร์แบบสแตนด์อโลน Node JS, Web Driver IO, Mocha, Should และ Selenium

นี่คือคำแนะนำในการติดตั้งสำหรับ Windows 7

(ฉันเป็นผู้ใช้ Mac/Linux แต่ฉันต้องติดตั้งทุกอย่างบนเครื่อง Windows 7 นี่คือเหตุผลที่ฉันได้รวมไว้เพื่อใช้อ้างอิง ขั้นตอนการติดตั้งบน Mac/Linux มีความคล้ายคลึงกัน โปรดปรึกษาข้อมูลอ้างอิงออนไลน์สำหรับข้อมูลเพิ่มเติม ข้อมูล.)

จากเบราว์เซอร์:

• ติดตั้งโหนดซึ่งรวมถึง NPM (ตัวจัดการแพ็คเกจโหนด)
• ไปที่
  • คลิกติดตั้ง
  • บันทึกและเรียกใช้ไฟล์
  • กำหนดเส้นทางและตัวแปร (NODE_PATH)

  • ไปที่ Control Panel->System and Security->System

    • การตั้งค่าระบบขั้นสูง

    • การตั้งค่าสภาพแวดล้อม (ตัวแปรผู้ใช้)

      • เพิ่มใน PATH

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

      • เพิ่ม NODE_PATH (ตัวแปรระบบ)

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

หมายเหตุ: ฉันติดตั้งซอฟต์แวร์ทั้งหมดด้านล่างโดยใช้ตัวเลือก npm global (-g) โดยปกติไม่แนะนำ แต่สำหรับการติดตั้งนี้ ฉันต้องติดตั้งทั่วโลก เนื่องจากจะใช้ในหลายโครงการ

เปิดพรอมต์คำสั่ง (cmd):

(ผู้ดูแลระบบผู้ใช้ท้องถิ่น)

• ติดตั้งซีลีเนียม "เว็บไดรเวอร์ IO"

  • npm ติดตั้ง webdriverio -g

    สิ่งนี้จะติดตั้งเว็บไดรเวอร์ IO ทั่วโลกบนเครื่องของคุณ

• ติดตั้งซอฟต์แวร์ทดสอบวิ่ง “มอคค่า”

  • npm ติดตั้ง mocha -g

    สิ่งนี้จะติดตั้งมอคค่าทั่วโลกบนเครื่องของคุณ

• ติดตั้งไลบรารีการยืนยัน "ควร"

  • การติดตั้ง npm ควร -g

    สิ่งนี้จะติดตั้ง “ควร” ทั่วโลกบนเครื่องของคุณ

• ติดตั้งเซิร์ฟเวอร์ Selenium Stand Alone

  • ไปที่
  • ดาวน์โหลดไฟล์ jar และย้ายไปยังไดเร็กทอรี "ซีลีเนียม"

• ติดตั้งเบราว์เซอร์และไดรเวอร์เบราว์เซอร์เพื่อทดสอบด้วย

  • จากพรอมต์ cmd:

    • สร้างไดเร็กทอรี “ซีลีเนียม”
    • C:\Users\{USERNAME}\selenium

    • คำสั่ง:

      • cd C:\Users\{USERNAME}
      • mkdir ซีลีเนียม

    • Firefox

      • ติดตั้งเบราว์เซอร์ Firefox หากยังไม่ได้ติดตั้ง
      • ต้องตั้งค่าเส้นทางเพื่อเริ่ม Firefox จากพรอมต์คำสั่ง (cmd)

      • แผงควบคุม->ระบบและความปลอดภัย->ระบบ

        • การตั้งค่าระบบขั้นสูง
        • การตั้งค่าสภาพแวดล้อม
        • เพิ่ม (ผนวกการใช้เซมิโคลอน) ให้กับ Path Variable
        • C:\Program Files (x86)\Mozilla Firefox
      • ไม่จำเป็นต้องใช้ไดรเวอร์เว็บพิเศษสำหรับ Firefox

    • โครเมียม

      • ติดตั้งเบราว์เซอร์ Chrome หากยังไม่ได้ติดตั้ง
      • เส้นทางอาจถูกตั้งค่าให้เริ่ม Chrome จากพรอมต์คำสั่ง (cmd)
      • ทดสอบก่อน: chrome.exe จากพรอมต์คำสั่ง (cmd)
      • หาก Chrome ไม่เริ่มทำงาน:

      • แผงควบคุม->ระบบและความปลอดภัย->ระบบ

        • การตั้งค่าระบบขั้นสูง
        • การตั้งค่าสภาพแวดล้อม
        • เพิ่ม (ผนวกการใช้เซมิโคลอน) ให้กับ Path Variable
        • C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

      • จำเป็นต้องมีไดรเวอร์เว็บพิเศษสำหรับ Chrome

        ไปที่ chromium.org และคลายซิปไดรเวอร์ 32 บิตลงในไดเร็กทอรี "ซีลีเนียม"

    • Internet Explorer (สำหรับ Windows เท่านั้น - จะไม่ทำงานบนแพลตฟอร์มอื่น)

      • จำเป็นต้องมีไดรเวอร์เว็บพิเศษสำหรับ IE

        • ไปที่
        • ดาวน์โหลดและคลายซิปไดรเวอร์ 64 บิตลงในไดเร็กทอรี "ซีลีเนียม"

ขั้นตอนที่ 2: สคริปต์ทดสอบพื้นฐาน

เริ่มจากพื้นฐานกันก่อน

นี่คือสคริปต์มอคค่าง่ายๆ ที่จะเปิดเว็บไซต์และยืนยันชื่อ

// tutorial1.js

// // นี่เป็นสคริปต์ทดสอบอย่างง่ายในการเปิดเว็บไซต์และ // ตรวจสอบชื่อ // ไลบรารีที่จำเป็น var webdriverio = ต้องการ ('webdriverio') ควร = ต้องการ ('should'); // บล็อกสคริปต์ทดสอบหรือชุดอธิบาย ('การทดสอบชื่อสำหรับ Web Driver IO - เว็บไซต์หน้าทดสอบการสอน', ฟังก์ชั่น () { // ตั้งค่าการหมดเวลาเป็น 10 วินาที this.timeout (10000); var driver = {}; // ขอเรียกใช้ก่อนการทดสอบก่อน (ฟังก์ชัน (เสร็จสิ้น) { // โหลดไดรเวอร์สำหรับไดรเวอร์เบราว์เซอร์ = webdriverio.remote ({ ความสามารถที่ต้องการ: {browserName: 'firefox'} }); driver.init (done); }); // ข้อมูลจำเพาะการทดสอบ - "ข้อกำหนด" มัน ('ควรโหลดหน้าและชื่อที่ถูกต้อง' ฟังก์ชัน () { // โหลดหน้า จากนั้นเรียกใช้ฟังก์ชัน () ส่งคืนไดรเวอร์.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html') // รับชื่อแล้วส่งชื่อเรื่องไปที่ function ().getTitle ().then (function (title) { // ตรวจสอบชื่อ (title).should.be.equal ("Web Driver IO - หน้าทดสอบการสอน "); // uncomment for console debug // console.log('Current Page Title: ' + title); }); }); // "hook" เพื่อเรียกใช้หลังจากการทดสอบทั้งหมดในบล็อกนี้ after(function(done)) { driver.end (เสร็จสิ้น); }); });

ข้อสังเกต:

• ก่อนอื่นคุณควรสังเกตว่าสคริปต์ทดสอบเขียนด้วย JAVASCRIPT (ลงท้ายด้วยนามสกุล.js)

• โครงสร้างพื้นฐานเกือบจะเหมือนกันสำหรับสคริปต์ทดสอบทั้งหมด

  • ความคิดเห็นของส่วนหัว (//)
  • ห้องสมุดที่จำเป็น
  • ตั้งค่าตัวเลือก (ไม่บังคับ)
  • ขอ: โหลดไดรเวอร์เบราว์เซอร์
  • ชุดทดสอบ (อธิบาย)
  • ข้อกำหนดการทดสอบ (สามารถเป็นได้หลาย Spec ในชุด)
  • ตะขอ: ทำความสะอาด

• ชุดทดสอบเริ่มต้นด้วยฟังก์ชันอธิบายซึ่งรับพารามิเตอร์สองตัว:

  • String - คำอธิบายของชุดทดสอบ

    • “ตรวจสอบหน้าสำหรับคำฟุ่มเฟือยที่เหมาะสม”
    • “ตรวจสอบการทำงานของปุ่มตัวเลือก”

  • ฟังก์ชั่น - บล็อกของรหัสที่จะดำเนินการ

    อธิบาย ('คำอธิบายของชุดทดสอบ', ฟังก์ชั่น () { });

• ชุดทดสอบจะมีข้อมูลจำเพาะการทดสอบ 1 รายการขึ้นไป (ข้อกำหนด)

• ข้อมูลจำเพาะเริ่มต้นด้วยฟังก์ชันซึ่งรับสองพารามิเตอร์:

  • สตริง - คำอธิบายของข้อกำหนดการทดสอบ

    • “ควรเป็นข้อความลิงค์และลิงค์ URL ที่ถูกต้อง”
    • “ควรมีการใช้คำฟุ่มเฟือยที่ถูกต้อง (สำเนาสำรับ)
  • ฟังก์ชั่น - บล็อกของรหัสที่จะดำเนินการ
  • มัน ('คำอธิบายข้อกำหนดการทดสอบ', ฟังก์ชั่น () { });
• ข้อมูลจำเพาะมีความคาดหวังอย่างน้อยหนึ่งอย่างที่ทดสอบสถานะของโค้ด

• สิ่งเหล่านี้เรียกว่าการยืนยัน

  ห้องสมุด "ควร" ให้คำยืนยัน

• ในเกือบทุกกรณี คุณจะต้องค้นหาองค์ประกอบอย่างน้อยหนึ่งรายการโดยใช้ตัวเลือก จากนั้นดำเนินการบางอย่างกับองค์ประกอบ

  • ตัวอย่าง:

    • ค้นหาข้อความในหน้าและตรวจสอบข้อความ
    • กรอกแบบฟอร์มและส่ง
    • ตรวจสอบ CSS ขององค์ประกอบ

มาดูตัวอย่างพร้อมความคิดเห็นให้ละเอียดยิ่งขึ้น

โหลดไลบรารีที่จำเป็น: ไดรเวอร์เว็บ IO และควร

// ห้องสมุดที่จำเป็น

var webdriverio = ต้องการ ('webdriverio') ควร = ต้องการ ('ควร');

กำหนดชุดทดสอบ ชุดนี้เรียกว่า: "Title Test for Web Driver IO - Tutorial Test Page Website"

// บล็อกสคริปต์ทดสอบหรือชุด

อธิบาย ('การทดสอบชื่อเรื่องสำหรับ Web Driver IO - เว็บไซต์หน้าทดสอบการสอน', function() { … });

ตั้งค่าการหมดเวลาเป็น 10 วินาทีเพื่อไม่ให้สคริปต์หมดเวลาเมื่อโหลดหน้า

// ตั้งค่าหมดเวลาเป็น 10 วินาที

this.timeout(10000);

ขอโหลดไดรเวอร์เบราว์เซอร์ก่อนเรียกใช้ข้อกำหนด "ข้อกำหนด" ไดรเวอร์ Firefox ถูกโหลดในตัวอย่างนี้

// ขอเรียกใช้ก่อนการทดสอบ

ก่อน (ฟังก์ชัน (เสร็จสิ้น) { // โหลดไดรเวอร์สำหรับไดรเวอร์เบราว์เซอร์ = webdriverio.remote ({ ความสามารถที่ต้องการ: {ชื่อเบราว์เซอร์: 'firefox'} }); driver.init (เสร็จสิ้น); });

กำหนดข้อกำหนดการทดสอบ

// ข้อมูลจำเพาะการทดสอบ - "ข้อกำหนด"

it('ควรโหลดหน้าและชื่อที่ถูกต้อง', ฟังก์ชั่น () { … });

โหลดหน้าเว็บไซต์

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

รับชื่อแล้วส่งชื่อเรื่องไปที่ function()

.getTitle().then(ฟังก์ชัน (หัวเรื่อง) {

… });

ตรวจสอบชื่อโดยใช้ไลบรารีการยืนยันควร

(ชื่อ).should.be.equal("Web Driver IO - หน้าทดสอบการสอน");

ขอลาออกและล้างข้อมูลไดรเวอร์เมื่อเสร็จสิ้น

// a "hook" เพื่อเรียกใช้หลังจากการทดสอบทั้งหมดในบล็อกนี้

หลัง (ฟังก์ชัน (เสร็จสิ้น) { driver.end (เสร็จสิ้น); });

ขั้นตอนที่ 3: เรียกใช้สคริปต์ทดสอบ

ตอนนี้เรามาดูกันว่าสคริปต์ทดสอบทำงานอย่างไรเมื่อรัน

ขั้นแรกให้เริ่มเซิร์ฟเวอร์ Selenium Stand Alone:

• สำหรับ Windows ให้ใช้บรรทัดคำสั่ง (cmd):

  • java -jar
  • # java -jar ซีลีเนียมเซิร์ฟเวอร์เซิร์ฟเวอร์แบบสแตนด์อโลน-2.46.0.jar

• สำหรับ Mac หรือ Linux ให้เปิดเทอร์มินัล:

  • java -jar
  • $ java -jar selenium-server-standalone-2.46.0.jar
• ดูภาพหน้าจอด้านบน

ถัดไปรันสคริปต์ทดสอบ:

• สำหรับ Windows ให้ใช้บรรทัดคำสั่ง (cmd):

  • มอคค่า
  • #มอคค่า tutorial1.js

• สำหรับ Mac หรือ Linux ให้เปิดเทอร์มินัล:

  • มอคค่า
  • $ mocha tutorial.js
• ดูภาพหน้าจอด้านบน

แล้วเกิดอะไรขึ้น?

Mocha เรียกใช้สคริปต์ "tutorial1.js" ไดรเวอร์เริ่มต้นเบราว์เซอร์ (Firefox) โหลดหน้าและตรวจสอบชื่อ

ขั้นตอนที่ 4: ตัวอย่างเว็บไซต์

ตัวอย่างทั้งหมดใช้กับไซต์นี้

เว็บไซต์ตัวอย่างจะอยู่ที่: หน้าทดสอบบทช่วยสอนของ Web Driver IO Tutorial

สคริปต์ทดสอบทั้งหมดสามารถดาวน์โหลดได้จาก github

ขั้นตอนที่ 5: ตัวอย่างเฉพาะ

รหัสทั้งหมดมีอยู่ใน github: Web Driver IO Tutorial บน github

• ตรวจสอบลิงก์และลิงก์ข้อความในรายการที่ไม่เรียงลำดับ - "linkTextURL1.js"

  • รายการที่ไม่เรียงลำดับมีและลิงก์เป็นรายการที่ 4
  • URL ควรเป็น "https://tlkeith.com/contact.html"

// ตรวจสอบข้อความลิงก์ติดต่อเรา

มัน ('ควรมีข้อความลิงก์ติดต่อเรา' ฟังก์ชัน () { ไดรเวอร์ส่งคืน.getText ("//ul[@id='mylist']/li[4]/a") จากนั้น (ฟังก์ชัน (ลิงก์) { คอนโซล.log('พบลิงก์: ' + ลิงก์); (ลิงก์).should.equal("ติดต่อเรา"); }); }); // ตรวจสอบ URL ติดต่อเรา ('ควรมี Contact Us URL', ฟังก์ชัน () { return driver.getAttribute("//ul[@id='mylist']/li[4]/a", "href").then(ฟังก์ชัน (ลิงก์) { (ลิงก์).should.equal("https://tlkeith.com/contact.html"); console.log('URL พบ: ' + ลิงก์); }); });

• ตรวจสอบข้อความลิขสิทธิ์ - "Copyright1.js"

  • ลิขสิทธิ์อยู่ในส่วนท้าย ตัวอย่างนี้แสดง 2 วิธีในการค้นหาข้อความลิขสิทธิ์:

    • โดยเป็นตัวเลือกองค์ประกอบ
    • โดยใช้ xpath เป็นตัวเลือกองค์ประกอบ

// ตรวจสอบข้อความลิขสิทธิ์โดยใช้ id เป็นตัวเลือกองค์ประกอบ

มัน ('ควรมีข้อความลิขสิทธิ์' ฟังก์ชัน () { ส่งคืนไดรเวอร์.getText ("#copyright") จากนั้น (ฟังก์ชัน (ลิงก์) { console.log ('พบลิขสิทธิ์: ' + ลิงก์); (ลิงก์).should เท่ากับ ("Tony Keith - tlkeith.com @ 2015 - สงวนลิขสิทธิ์"); }); }); // ตรวจสอบข้อความลิขสิทธิ์โดยใช้ xpath เป็นตัวเลือกองค์ประกอบ ('ควรมีข้อความลิขสิทธิ์', ฟังก์ชัน () { ไดรเวอร์ส่งคืน.getText ("//footer/center/p") จากนั้น (ฟังก์ชัน (ลิงก์) { console.log ('พบลิขสิทธิ์: ' + ลิงก์); (ลิงก์).should.equal("Tony Keith - tlkeith.com @ 2015 - สงวนลิขสิทธิ์"); }); });

• กรอกแบบฟอร์มและส่ง - "formFillSubmit1.js"

  • กรอกชื่อ นามสกุล แล้วส่ง จากนั้นรอผล

  • ตัวอย่างนี้แสดง 3 วิธีในการกรอกฟิลด์ป้อนชื่อ:

    • โดย id
    • โดย xpath จากอินพุต
    • โดย xpath จาก form->input
  • แสดงวิธีการล้างช่องใส่ข้อมูลด้วย

// ตั้งชื่อโดยใช้ id เป็น: Tony

it('ควรตั้งชื่อเป็นโทนี่' ฟังก์ชัน () { return driver.setValue("#fname", "Tony").getValue("#fname").then(function (e) { (e).should.be.equal("Tony"); console.log("ชื่อ: " + e); }); }); // ล้างชื่อโดยใช้ id ('ควรล้างชื่อ', function () { return driver.clearElement("#fname").getValue("#fname") จากนั้น (function (e) { (e).should.be.equal(""); console.log("ชื่อ: " + e); }); }); // ตั้งชื่อโดยใช้ xpath จากอินพุตเป็น: Tony it ('ควรตั้งชื่อเป็น Tony', ฟังก์ชัน () { return driver.setValue("//input[@name='fname']", "Tony").getValue("//input[@name='fname']").then(function (e) { (e).should.be.equal("Tony"); console.log("ชื่อ: " + e); }); }); // ล้างชื่อโดยใช้ xpath จากอินพุต ('ควรล้างชื่อ', ฟังก์ชัน () { return driver.clearElement("//input[@name='fname']").getValue("//input[@name='fname']")then(function (e) { (e).should.be.equal(""); console.log("First Name: " + e); }); }); // ตั้งชื่อโดยใช้ xpath จาก form เป็น: Tony it('ควรตั้งชื่อเป็น Tony', function () { return driver.setValue("//form[@id='search-form']/input[1]", "โทนี่").getValue("//form[@id='search-form']/input[1]").then(function (e) { (e).should.be.equal("โทนี่"); console.log("ชื่อ: " + e); }); }); // ตั้งค่านามสกุลโดยใช้ id เป็น: Keith it('ควรตั้งนามสกุลเป็น Keith', function () { return driver.setValue("#lname", "Keith").getValue("#lname") จากนั้น (ฟังก์ชัน (e) { (e).should.be.equal ("Keith"); console.log ("นามสกุล: " + e); }); }); // ส่งแบบฟอร์มและรอผลการค้นหา ('ควรส่งแบบฟอร์มและรอผล', ฟังก์ชัน () { return driver.submitForm("#search-form") จากนั้น (ฟังก์ชัน (e) { console.log (' ส่งแบบฟอร์มการค้นหา'); }).waitForVisible("#search-results", 10000).then(function (e) { console.log('Search Results Found'); }); });

• คลิกปุ่มแสดง/ซ่อนและยืนยันข้อความ - "showHideVerify1.js"

  • ข้อความอยู่ในองค์ประกอบแสดง/ซ่อน ปุ่มควบคุมสถานะ

  • ตัวอย่างนี้แสดง:

    • คลิกที่ปุ่มเพื่อขยาย
    • รอให้องค์ประกอบปรากฏ (ขยาย)
    • ตรวจสอบข้อความ (คัดลอกสำรับ)

// คลิกปุ่ม "ข้อมูลเพิ่มเติม" และยืนยันข้อความในองค์ประกอบที่ขยาย

มัน ('ควรคลิกปุ่มข้อมูลเพิ่มเติมและตรวจสอบข้อความ' ฟังก์ชัน () { ส่งคืนไดรเวอร์.click ("#moreinfo") จากนั้น (ฟังก์ชัน () { console.log ('คลิกปุ่มข้อมูลเพิ่มเติม'); }).waitForVisible ("#collapseExample", 5000).getText("//div[@id='collapseExample']/div") จากนั้น (ฟังก์ชัน (e) { console.log ('Text: ' + e); (e).should.be.equal("ไปที่นี่ดีทุกอย่าง!" }); });

• ตรวจสอบข้อผิดพลาดของฟิลด์แบบฟอร์ม - "formFieldValidation.js"

  • ใช้สคริปต์ทดสอบเพื่อตรวจสอบข้อความแสดงข้อผิดพลาดที่ถูกต้อง

  • ตัวอย่างนี้แสดง:

    ตรวจสอบข้อความแสดงข้อผิดพลาดและยืนยันตำแหน่ง (ตำแหน่งรายการไม่เรียงลำดับ)

มัน ('ควรมี 5 ข้อผิดพลาด: first/last/address/city/state', function () {

ส่งคืนไดรเวอร์.getText ("//ul[@class='alert alert-danger']/li[1]") จากนั้น (ฟังก์ชัน (e) { console.log ('พบข้อผิดพลาด: ' + e); (e).should.be.equal('Please enter first name'); }).getText("//ul[@class='alert alert-danger']/li[2]") จากนั้น (ฟังก์ชัน (e) { console.log ('พบข้อผิดพลาด: ' + e); (e).should.be.equal ('โปรดป้อนนามสกุล'); }).getText("//ul[@class='alert alert-danger ']/li[3]").then(function (e) { console.log('Error found: ' + e); (e).should.be.equal('Please enter address'); }). getText("//ul[@class='alert alert-danger']/li[4]") จากนั้น (ฟังก์ชัน (e) { console.log ('พบข้อผิดพลาด: ' + e); (e).should.be.equal('Please enter city'); }).getText("//ul[@class='alert alert-danger']/li[5]") จากนั้น (ฟังก์ชัน (e) { console.log ('พบข้อผิดพลาด: ' + e); (e).should.be.equal('Please enter state'); }); });

• วนลูปข้อมูลเพื่อตรวจสอบลิงก์ URL/ข้อความ/หน้า - "LoopDataExample1.js"

  • ตัวอย่างนี้แสดงให้เห็นว่า:ใช้อาร์เรย์ของข้อมูล JSON เพื่อจัดเก็บลิงก์และชื่อ จากนั้นทำซ้ำ

    • ตรวจสอบแต่ละข้อความ URL และลิงก์
    • คลิกลิงค์และโหลดหน้า

// ลิงก์ข้อมูล - ลิงก์และข้อความ

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": "เดบิว 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"}]; … // วนซ้ำแต่ละ linkArray linkArray.forEach(function(d) { it('should contain text/link then goto page - ' + d.name, function() { return driver // ตรวจสอบให้แน่ใจว่าคุณอยู่ในหน้าเริ่มต้น.url('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle().then(function (title) { // ตรวจสอบชื่อ (title).should.be.equal ("Web Driver IO - หน้าทดสอบการสอน"); }) // ค้นหา URL.getAttribute('a=' + d.name, "href") จากนั้น (ฟังก์ชัน (ลิงก์) { (ลิงก์).should.equal (d.link); console.log('URL found: ' + d.link); }) // ไปที่หน้า URL และตรวจสอบว่ามี.click('a=' + d.name).waitForVisible("#js-repo-pjax- คอนเทนเนอร์", 10000). จากนั้น (ฟังก์ชัน () { console.log ('Github Page Found'); }); }); });

• วนลูปข้อมูลคงที่เพื่อเติมฟิลด์แบบฟอร์ม - "loopDataExample2.js"

  • ตัวอย่างนี้แสดงให้เห็นว่า:ใช้อาร์เรย์ของข้อมูล JSON เพื่อจัดเก็บชื่อ/นามสกุล

    • วนซ้ำข้อมูลเพื่อเติมฟิลด์แบบฟอร์ม จากนั้นส่ง form
    • รอหน้าผลลัพธ์
    • ยืนยันชื่อ/นามสกุลในหน้าผลลัพธ์

// data array - firstName และ lastNamevar dataArray = [{"firstName": "Tony", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"firstName" ": "เจน", "lastName": "Doe"}, {"firstName": "Don", "lastName": "Johnson"}]; … // วนซ้ำแต่ละ dataArray dataArray.forEach(function(d) { it('should populate fields, sumbit page', function() { return driver // ตรวจสอบให้แน่ใจว่าคุณอยู่ในหน้าเริ่มต้น.url('http:/ /www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle ().then (ฟังก์ชัน (ชื่อ) { // ตรวจสอบชื่อ (title).should.be.equal ("Web Driver IO - หน้าทดสอบการสอน"); }).setValue("#fname", d.firstName).getValue("#fname") จากนั้น (ฟังก์ชัน (e) { (e).should.be.equal (d.firstName); console.log ("First ชื่อ: " + e); }).setValue("#lname", d.lastName).getValue("#lname")).then(function (e) { (e).should.be.equal(d.lastName)); console.log("นามสกุล: " + e); }).submitForm("#search-form") จากนั้น (function() { console.log('Submit Search Form'); }).waitForVisible("#search-results", 10000).then(function () { console.log('Result Page Found'); }).getText("//h1") จากนั้น (ฟังก์ชัน (ลิงก์) { console.log ('ข้อความที่พบ: ' + ลิงก์); (ลิงก์).should.equal("ยินดีต้อนรับ " + d.firstName + " " + d.lastName + "."); }); }); });

• ตรวจสอบคุณสมบัติ CSS - "cssValidation1.js"

  • ตัวอย่างนี้แสดงวิธีการ:

    • ตรวจสอบคุณสมบัติ CSS ต่อไปนี้:

      • สี
      • แผ่นรอง (บน ล่าง ขวา ซ้าย)
      • สีพื้นหลัง

มัน ('ควรมีสีที่ถูกต้องของข้อความแสดงข้อผิดพลาด', ฟังก์ชัน () { return driver.getCssProperty("//ul[@class='alert alert-danger']/li[1]", "color") จากนั้น (ฟังก์ชัน (ผลลัพธ์) { console.log ('Color found: ' + result.parsed.hex + " หรือ " + result.value); (result.parsed.hex).should.be.equal ('# a94442'); }); });

มัน ('ควรมีช่องว่างภายในที่ถูกต้องในเซลล์ตาราง' ฟังก์ชัน () {

ส่งคืนไดรเวอร์ // padding: บนขวาล่างซ้าย.getCssProperty("//table[@id='filelist']/thead/tr[1]/td[1]", "padding-top") จากนั้น (ฟังก์ชัน (ผลลัพธ์) { console.log('padding-top found: ' + result.value); (result.value).should.be.equal('10px'); }).getCssProperty("//table[@id= 'filelist']/thead/tr[1]/td[1]", "padding-bottom") จากนั้น (ฟังก์ชัน (ผลลัพธ์) { console.log ('padding-bottom พบ: ' + result.value); (result.value).should.be.equal('10px'); }).getCssProperty("//table[@id='filelist']/thead/tr[1]/td[1]", "padding- ขวา") จากนั้น (ฟังก์ชัน (ผลลัพธ์) { 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(ฟังก์ชัน (ผลลัพธ์) { console.log ('padding-left found: ' + result.value); (result.value).should.be.equal('5px'); }); });

มัน ('ควรมีสีพื้นหลังที่ถูกต้องในส่วนหัวของตาราง' ฟังก์ชัน () {

ส่งคืนไดรเวอร์.getCssProperty ("//table[@id='filelist']/thead", "background-color") จากนั้น (ฟังก์ชัน (ผลลัพธ์) { console.log ('พบสีพื้นหลัง: ' + result.parsed ฐานสิบหก); (result.parsed.hex).should.be.equal('#eeeeee'); }); });

ขั้นตอนที่ 6: คำแนะนำและเคล็ดลับ

• การดีบัก:

  • เปิดการบันทึกที่ระดับไดรเวอร์เพื่อการดีบักเพิ่มเติมและเพื่อสร้างบันทึก

    • ตั้งค่า logLevel เป็น 'verbose'
    • ตั้งค่า logOutput เป็นชื่อไดเร็กทอรี ('logs')

ไดรเวอร์ = webdriverio.remote (loglevel: 'verbose', logOutput: 'logs', {desiredCapabilities: {browserName: 'firefox'} });

• ใช้ console.log(), debug(), getText() เพื่อดีบัก

  • console.log() - ใช้เพื่อแสดงข้อมูลเพื่อกำหนดสถานะ
  • debug() - ใช้หยุดเบราว์เซอร์/สคริปต์ชั่วคราวจนกว่าจะกด Enter บนบรรทัดคำสั่ง

  • getText() - ใช้เพื่อตรวจสอบว่าคุณกำลังโต้ตอบกับองค์ประกอบที่ถูกต้อง

    มีประโยชน์อย่างยิ่งกับนิพจน์ xpath

// คลิกที่รายการ 3 จากรายการ

มัน ('ควรคลิกที่รายการที่ 3 จากรายการ' ฟังก์ชัน () { // ใช้ getText() เพื่อตรวจสอบว่า xpath ถูกต้องสำหรับไดรเวอร์ส่งคืนองค์ประกอบ.getText("//ul[@id='mylist']/li [3]/div/div/a") จากนั้น (ฟังก์ชัน (ลิงก์) { // ใช้ console.log () เพื่อส่งออกข้อมูล console.log ('พบลิงก์: ' + ลิงก์); (ลิงก์).should.equal ("Item 3"); }) // ใช้ debug() เพื่อหยุดการกระทำเพื่อดูว่าเกิดอะไรขึ้นบนเบราว์เซอร์.debug().click("//ul[@id='mylist']/li[3] /div/div/a") จากนั้น (ฟังก์ชัน () { console.log ('ลิงก์ที่คลิก'); }) // รอให้แบบฟอร์มการค้นหาของ Google ปรากฏขึ้น.waitForVisible("#tsf", 20000).then (ฟังก์ชัน (e) { console.log ('พบผลการค้นหา'); }); });

• ใช้ตัวแปรสภาพแวดล้อมเพื่อเปลี่ยนเบราว์เซอร์แบบไดนามิก:

  • ใช้ตัวแปรสภาพแวดล้อม SELENIUM_BROWSER เพื่อเรียกใช้เบราว์เซอร์อื่นโดยไม่ต้องแก้ไขสคริปต์ทดสอบในแต่ละครั้ง
  • ต้องมีการเปลี่ยนแปลงการเข้ารหัสเล็กน้อยเพื่อรองรับ

การเปลี่ยนแปลงรหัส:

// โหลดไดรเวอร์สำหรับเบราว์เซอร์

ไดรเวอร์ = webdriverio.remote ({ ความสามารถที่ต้องการ: {ชื่อเบราว์เซอร์: process.env. SELENIUM_BROWSER || 'chrome'} });

เบราว์เซอร์ที่รองรับ:

• Internet Explorer - IE 8+ (Windows เท่านั้น)

  SELENIUM_BROWSER=เช่นมอคค่า

• Firefox 10+ (Windows/Max/Linux)

  SELENIUM_BROWSER=ไฟร์ฟอกซ์มอคค่า

• Chrome 12+ (Windows/Max/Linux)

  SELENIUM_BROWSER=มอคค่าโครเมียม

• โอเปร่า 12+

  SELENIUM_BROWSER=โอเปร่ามอคค่า

• ซาฟารี

  SELENIUM_BROWSER=มอคค่าซาฟารี

การทดสอบ:

• สำหรับ Windows ให้ใช้ git bash shell:

  • SELENIUM_BROWSER=มอคค่าโครเมียม
  • $ SELENIUM_BROWSER=chrome มอคค่า DynamicBrowser.js

• สำหรับ Mac หรือ Linux ให้เปิดเทอร์มินัล:

  • SELENIUM_BROWSER=มอคค่าโครเมียม
  • $ SELENIUM_BROWSER=chrome มอคค่า DynamicBrowser.js

• การทดสอบเชิงตอบสนอง:

  • กำหนดเบรกพอยต์ตามโปรเจ็กต์หรือเฟรมเวิร์ก (เช่น บูตสแตรป)

  • กำหนดตัวแปรสภาพแวดล้อมสำหรับแต่ละเบรกพอยต์:

    • เดสก์ท็อป - 1200 px
    • แท็บเล็ต - 992 px
    • มือถือ - 768 px

  • พัฒนาคำสั่งที่ใช้ซ้ำได้เพื่ออ่านตัวแปรสภาพแวดล้อมและกำหนดขนาดเบราว์เซอร์

    ดูตัวอย่างด้านล่าง

  • เรียกคำสั่งที่ใช้ซ้ำได้ในสคริปต์ทดสอบของคุณ

// รหัสที่ใช้ซ้ำได้ - ไลบรารี // ข้อมูลโค้ด 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; }

// สคริปต์ทดสอบ

before(function(done) { winsize = common.getWindowSizeParams(); … driver.addCommand('setWindowSize', common.setWindowSize.bind(driver)); } // กำหนดขนาดหน้าต่าง ('ควรกำหนดขนาดหน้าต่าง', ฟังก์ชัน (เสร็จสิ้น) {// เฉพาะความกว้างเท่านั้นที่มีความสำคัญ

• คำสั่งที่ใช้ซ้ำได้ (คำสั่งที่กำหนดเอง):

  • Web Driver IO สามารถขยายได้อย่างง่ายดาย
  • ฉันชอบใส่คำสั่งที่ใช้ซ้ำได้ทั้งหมดลงในไลบรารี (บางทีนี่อาจเป็นโรงเรียนเก่า แต่ใช้งานได้!)

common/commonLib.js

// VerifyLastNameCheckError()

// // คำอธิบาย: // ตรวจสอบข้อความแสดงข้อผิดพลาดในการตรวจสอบความถูกต้องของแบบฟอร์มนามสกุล // // อินพุต: // หมายเลข - ดัชนีข้อผิดพลาด (1-5) // เอาต์พุต: // none // var Ver VerifyLastNameCheckError = function () { var idx = อาร์กิวเมนต์[0], โทรกลับ = อาร์กิวเมนต์[arguments.length - 1]; this.getText("//ul[@class='alert alert-danger']/li[" + idx + "]", function(err, e) { console.log('Error found: ' + e);.getText("//ul[@class='alert alert-danger']/li[" + idx + "]" นี้ (e).should.be.equal('กรุณาใส่นามสกุล'); }).call(callback); }; // ส่งออกฟังก์ชัน module.exports.verifyLastNameCheckError = VerifyLastNameCheckError;

ต่อไปนี้คือการเปลี่ยนแปลงเฉพาะที่จำเป็นในการเรียกใช้ฟังก์ชันที่ใช้ซ้ำได้

ดู formFieldValidation.js สำหรับตัวอย่างการทำงานที่สมบูรณ์

// ต้องการคำสั่งที่ใช้ซ้ำได้ - CommonLib

common = ต้องการ ('./Common/CommonLib'); … // ผูกคำสั่ง driver.addCommand('verifyFirstNameError', common.verifyFirstNameCheckError.bind(driver)); driver.addCommand('verifyLastNameError', common.verifyLastNameCheckError.bind(driver)); มัน ('ควรมี 2 ข้อผิดพลาด: ชื่อ/นามสกุล', ฟังก์ชัน () { // เรียกไดรเวอร์ฟังก์ชันที่ใช้ซ้ำได้.verifyFirstNameError(1);.verifyLastNameError(2); });

• โครงสร้างไฟล์/ไดเรกทอรีโครงการ:

  • นี่คือโครงสร้างโครงการทั่วไป:

    • "โครงการ" - ไดเรกทอรีโครงการหลัก

      • README.md - readme สำหรับโครงการระดับโลก

      • "Common" - ไดเร็กทอรีสำหรับฟังก์ชันโกลบอลที่เหมือนกันในทุกโปรเจ็กต์

        • common-lib.js - ไลบรารีฟังก์ชันส่วนกลาง
        • README.md - readme สำหรับฟังก์ชันส่วนกลาง

      • "Product1" - ไดเรกทอรีสำหรับผลิตภัณฑ์ 1

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

        • "Common" - ไดเร็กทอรีสำหรับฟังก์ชันในเครื่องไปยังโปรเจ็กต์ 1

          • prod1-lib.js - ไลบรารีฟังก์ชันในเครื่องสำหรับโปรเจ็กต์ 1
          • README.md - readme สำหรับฟังก์ชันในเครื่องของโปรเจ็กต์ 1

      • "Product2" - ไดเรกทอรีสำหรับผลิตภัณฑ์ 2test-script1.jstest-script2.js

        • "Common" - ไดเร็กทอรีสำหรับฟังก์ชันในเครื่องไปยังโปรเจ็กต์2

          • prod2-lib.js - ไลบรารีฟังก์ชันในเครื่องสำหรับโปรเจ็กต์ 2
          • README.md - readme สำหรับฟังก์ชันในเครื่องของโปรเจ็กต์2

• แบ่งสคริปต์ทดสอบออกเป็นหลายไฟล์:

  • นี่คือตัวอย่างการใช้หลายไฟล์:

    • Sanity Check - สคริปต์ทดสอบพื้นฐานเพื่อตรวจสอบทุกอย่างทำงาน
    • การตรวจสอบองค์ประกอบคงที่และข้อความ - ตรวจสอบองค์ประกอบและข้อความทั้งหมด
    • การตรวจสอบข้อผิดพลาดของแบบฟอร์ม/หน้า - การตรวจสอบข้อผิดพลาด
    • ผลการค้นหา - ทดสอบเนื้อหาแบบไดนามิก

• โทรกลับ VS. สัญญา:

  • เวอร์ชัน 3 ของ Web Driver IO รองรับทั้งการโทรกลับและสัญญา

    สัญญาเป็นวิธีที่ต้องการเนื่องจากจะลดรหัสการจัดการข้อผิดพลาด โปรดดูตัวอย่างเดียวกันด้านล่างที่เขียนโดยใช้การเรียกกลับและคำสัญญา

โทรกลับ

// ตั้งค่า/ยืนยันชื่อ/นามสกุลโดยใช้ Callback

มัน ('ควรตั้งค่า / ตรวจสอบชื่อ / นามสกุลโดยใช้การโทรกลับ', ฟังก์ชัน (เสร็จสิ้น) { driver.setValue ("#fname", "Tony", ฟังก์ชัน (e) { driver.getValue ("#fname", ฟังก์ชัน (err, e) { (e).should.be.equal ("Tony"); console.log ("ชื่อ: " + e); driver.setValue ("#lname", "Keith", ฟังก์ชัน (e) { driver.getValue("#lname", function (err, e) { (e).should.be.equal("Keith"); console.log("Last Name: " + e); done(); }); }); }); }); });

สัญญา

// ตั้งค่า/ยืนยันชื่อ/นามสกุลโดยใช้ Promises

it('ควรตั้งค่า/ยืนยันชื่อ/นามสกุลโดยใช้สัญญา', function () { return driver.setValue("#fname", "Tony").getValue("#fname") จากนั้น (function (e) { (e).should.be.equal("Tony"); console.log("ชื่อ: " + e); }).setValue("#lname", "Keith").getValue("#lname") จากนั้น (ฟังก์ชัน (e) { (e).should.be.equal ("Keith"); console.log ("นามสกุล: " + e); }); });

ขั้นตอนที่ 7: แหล่งข้อมูลเพิ่มเติม

ต่อไปนี้เป็นแหล่งข้อมูลเพิ่มเติมสำหรับการอ้างอิงของคุณ:

• กลุ่มสนทนา (Gitter)

  • Web Driver IO Discussion Group
  • กลุ่มสนทนามอคค่า

• โครงการอื่นๆ ที่น่าสนใจ

  • Supertest - การยืนยัน
  • ชัย - คำยืนยัน

ขั้นตอนที่ 8: สรุป

ฉันใช้เวลาค้นคว้าเทคโนโลยีเพื่อใช้สำหรับโครงการของฉัน ตอนแรกฉันเริ่มต้นด้วย Selenium Web Driver แต่เปลี่ยนไปใช้ Web Driver IO Web Driver IO ดูเหมือนจะใช้งานง่ายกว่าและขยายได้ง่ายกว่ามาก (อย่างน้อยเอกสารประกอบสำหรับการขยาย - คำสั่งที่ใช้ซ้ำได้ดีกว่า)

เมื่อฉันเริ่มดูเทคโนโลยีครั้งแรก มันยากที่จะหาตัวอย่างที่ดีที่เกี่ยวข้องกับสิ่งที่ฉันพยายามจะทำ นี่คือเหตุผลที่ฉันต้องการแบ่งปันข้อมูลและความรู้นี้กับคุณ

เทคโนโลยีทำงานได้ดีกว่าที่ฉันคาดไว้มาก แต่มีช่วงการเรียนรู้ที่เกี่ยวข้อง เมื่อฉันเข้าใจว่าส่วนประกอบทั้งหมดทำงานร่วมกันอย่างไร ฉันก็สามารถเขียนสคริปต์ทดสอบที่ซับซ้อนได้ในเวลาอันสั้น สคริปต์ที่ยากที่สุดคือส่วนประกอบที่ใช้ JavaScript เช่น ตัวเลือกวันที่และตัวเลือกโมดอล

ฉันไม่เคยเรียกตัวเองว่าเป็นนักพัฒนา JavaScript และไม่เคยอยากเป็นผู้เชี่ยวชาญ JavaScript แต่การใช้เทคโนโลยีเหล่านี้กระตุ้นให้ฉันพัฒนาทักษะ JS ของฉันอย่างแน่นอน

ฉันหวังว่าบทความนี้จะเป็นประโยชน์และตัวอย่างมีความชัดเจนและให้ข้อมูล

โปรดแจ้งให้เราทราบหากคุณมีคำถามหรือความคิดเห็น

ขอขอบคุณ, Tony Keith