Selenium ส่วนขยายหลัก (User-Extensions.js)

Selenium ส่วนขยายหลัก

เพื่อให้เข้าใจส่วนขยาย เรามาทำความเข้าใจหลักการพื้นฐานทั้งสามประการกันก่อน Selenium IDEทุกคำสั่งที่คุณบันทึกหรือพิมพ์ใน IDE จะอยู่ในหนึ่งในสามหมวดหมู่ด้านล่าง และภาพหน้าจอแต่ละภาพจะแสดงให้เห็นว่าหมวดหมู่นั้นปรากฏในรายการคำสั่งของ IDE อย่างไร

1. การดำเนินการ: คุณกำลังดำเนินการอะไรอยู่บนหน้าจอ UI

   

2. ผู้เข้าถึง / การยืนยัน: คุณทำการตรวจสอบความถูกต้องของข้อมูลที่ได้รับจากส่วนติดต่อผู้ใช้ (UI) อย่างไรบ้าง

   

3. กลยุทธ์การระบุตำแหน่ง: วิธีการค้นหาองค์ประกอบนั้นในส่วนติดต่อผู้ใช้ (UI)

   

Selenium IDE มาพร้อมกับไลบรารีที่ครบครัน ซึ่งมีแอ็กชัน ตัวเข้าถึง และการตรวจสอบความถูกต้อง รวมถึงกลยุทธ์การระบุตำแหน่งมากมายอยู่แล้ว

บางครั้ง โครงการอาจต้องการฟังก์ชันการทำงานที่ไม่มีอยู่ในไลบรารีนั้น ในสถานการณ์เช่นนั้น คุณสามารถขยายไลบรารีได้โดยการเพิ่มส่วนขยายที่กำหนดเองของคุณเอง ส่วนขยายที่กำหนดเองเหล่านี้เรียกว่า... ส่วนขยายผู้ใช้.

ตัวอย่างเช่น สมมติว่าคุณต้องการฟังก์ชันที่แปลงข้อความให้เป็นตัวพิมพ์ใหญ่ก่อนที่จะใส่ลงในองค์ประกอบบนเว็บ ฟังก์ชันดังกล่าวไม่มีอยู่ในไลบรารีเริ่มต้น ดังนั้นคุณจึงต้องสร้างส่วนขยายผู้ใช้ของคุณเอง ในบทช่วยสอนนี้ คุณจะได้เรียนรู้วิธีสร้างส่วนขยายผู้ใช้ที่แปลงข้อความให้เป็นตัวพิมพ์ใหญ่

⚠️ ก่อนเริ่มต้น: ขั้นตอนการทำงานที่อธิบายไว้ในที่นี้เป็นของ Selenium แกนหลักและต้นฉบับ Firefox-เสียบเข้าไป Selenium IDE. Selenium ฟังก์ชันหลักถูกยกเลิกแล้ว และการสนับสนุนส่วนขยายของผู้ใช้ก็ถูกถอดออกไปด้วย Selenium ขวดโหลใน Selenium 3. ขั้นตอนและโค้ดด้านล่างนี้ยังคงถูกเก็บรักษาไว้ เนื่องจากชุดโปรแกรม Selenese รุ่นเก่าจำนวนมากยังคงใช้ขั้นตอนและโค้ดเหล่านี้อยู่ ส่วนวิธีการทดแทนที่ทันสมัยกว่านั้นจะอธิบายไว้ในภายหลังในบทความนี้

ข้อกำหนดในการสร้าง Selenium ส่วนขยายผู้ใช้

เพื่อสร้างส่วนขยายผู้ใช้สำหรับ Selenium สำหรับการใช้งาน IDE คุณจำเป็นต้องมีความรู้พื้นฐานเกี่ยวกับแนวคิดต่างๆ Javaต้นฉบับ และโดยเฉพาะอย่างยิ่ง Javaวัตถุต้นแบบสคริปต์ แผนภาพด้านล่างแสดงวัตถุต้นแบบสองชิ้นที่ส่วนขยายของผู้ใช้จะเชื่อมต่อเข้าด้วยกัน

ในการสร้างส่วนขยายผู้ใช้ของคุณ คุณต้องเขียนโค้ดดังนี้ Javaเขียนสคริปต์วิธีการและเพิ่มเข้าไปใน Selenium ต้นแบบวัตถุและต้นแบบวัตถุของ PageBot

สรุป ความน่าเชื่อถือของ Olymp Trade? Selenium IDE ตรวจพบส่วนขยายของผู้ใช้

หลังจากเพิ่มส่วนขยายผู้ใช้แล้ว Selenium IDE และ IDE เริ่มทำงานแล้ว ฟังก์ชันทุกอย่างถูกลงทะเบียนไว้ในนั้น Javaต้นแบบสคริปต์ถูกโหลดแล้ว และ Selenium IDE รู้จักคำสั่งแต่ละคำสั่งด้วยชื่อของมัน นั่นคือเหตุผลที่คำนำหน้าชื่อในส่วนถัดไปไม่ใช่ทางเลือกด้านสไตล์ แต่เป็นวิธีการที่ IDE จัดประเภทคำสั่งของคุณ

วิธีการสร้างส่วนขยายผู้ใช้

ขั้นตอนที่ 1) การดำเนินการ – ทุกการกระทำเริ่มต้นด้วย doถ้าการกระทำนั้นแปลงข้อความให้เป็นตัวพิมพ์ใหญ่ ชื่อของการกระทำนั้นคือ doTextUpperCaseเมื่อคุณเพิ่มวิธีการดำเนินการนี้ลงใน Selenium IDE เองจะสร้างเมธอดรอที่ตรงกันขึ้นมา ดังนั้น doTextUpperCase นอกจากนี้ยังสร้างฟังก์ชันรอด้วย textUpperCaseAndWaitเมธอดนี้สามารถรับพารามิเตอร์ได้สองตัว

ตัวอย่าง: การดำเนินการข้อความตัวพิมพ์ใหญ่

Selenium.prototype.doTextUpperCase = function(locator, text) {
// Here findElement is itself capable to handle all type of locator(xpath,css,name,id,className), We just need to pass the locator text
var element = this.page().findElement(locator);

// Create the text to type
text = text.toUpperCase();

// Replace the element text with the new text
this.page().replaceText(element, text);
};

ขั้นตอนที่ 2) ตัวเข้าถึง / การยืนยัน – ผู้เข้าถึงทั้งหมดที่ลงทะเบียนไว้ Selenium ต้นแบบวัตถุมีคำนำหน้าด้วย ได้รับ or isตัวอย่างเช่น getValueFromCompoundTable หรือ isValueFromCompoundTable ตัวเข้าถึงข้อมูลสามารถรับพารามิเตอร์ได้สองตัว ตัวหนึ่งสำหรับเป้าหมาย และอีกตัวหนึ่งสำหรับฟิลด์ค่าในกรณีทดสอบ ภาพหน้าจอด้านล่างแสดงให้เห็นว่าคำนำหน้าเหล่านั้นปรากฏอย่างไรเมื่อโหลดส่วนขยายแล้ว

สำหรับอุปกรณ์เข้าถึงแต่ละชิ้น Selenium IDE จะสร้างฟังก์ชันการตรวจสอบที่เกี่ยวข้องโดยมีคำนำหน้าด้วย ตรวจสอบ และ ยืนยันรวมถึงฟังก์ชันรอที่ขึ้นต้นด้วย รอ.

ตัวอย่าง: สำหรับตัวเข้าถึงข้อความตัวพิมพ์ใหญ่

Selenium.prototype.assertTextUpperCase = function(locator, text) {
// All locator-strategies are automatically handled by "findElement"
var element = this.page().findElement(locator);

// Create the text to verify
text = text.toUpperCase();

// Get the actual element value
var actualValue = element.value;

// Make sure the actual value matches the expected
Assert.matches(expectedValue, actualValue);
};

Selenium.prototype.isTextEqual = function(locator, text) {
return this.getText(locator).value===text;
};

Selenium.prototype.getTextValue = function(locator, text) {
return this.getText(locator).value;
};

ขั้นตอนที่ 3) กลยุทธ์การระบุตำแหน่ง – หากคุณต้องการสร้างฟังก์ชันของคุณเองเพื่อค้นหาองค์ประกอบ ให้ขยายต้นแบบ PageBot ด้วยฟังก์ชันที่มีคำนำหน้าว่า ค้นหาองค์ประกอบโดยฟังก์ชันนี้รับพารามิเตอร์สองตัว ได้แก่ สตริงระบุตำแหน่ง และเอกสารที่ต้องการค้นหาองค์ประกอบนั้น

ตัวอย่าง: สำหรับตัวระบุข้อความตัวพิมพ์ใหญ่

// The "inDocument" is a document you are searching.
PageBot.prototype.locateElementByUpperCase = function(text, inDocument) {
// Create the text to search for
var expectedValue = text.toUpperCase();

// Loop through all elements, looking for ones that have
// a value === our expected value
var allElements = inDocument.getElementsByTagName("*");
// This star '*' is a kind of regular expression it will go through every element (in HTML DOM every element surely have a tag name like<body>,<a>,<h1>,<table>,<tr>,<td> etc. ). Here our motive is to find an element which matched with the Upper Case text we have passed so we will search it with all elements and when we get match we will have the correct web element.
for (var i = 0; i < allElements.length; i++) {
var testElement = allElements[i];
if (testElement.innerHTML && testElement.innerHTML === expectedValue) {
return testElement;
}
}
return null;
};

บันทึกฟังก์ชันทั้งสามลงในไฟล์เดียวชื่อ... ส่วนขยายผู้ใช้.jsไฟล์นั้นเป็นไฟล์ธรรมดา Javaเป็นสคริปต์ ดังนั้นโปรแกรมแก้ไขข้อความใดๆ ก็เพียงพอแล้ว

วิธีใช้งานส่วนขยายหลักที่สร้างขึ้นใหม่

การโหลดไฟล์เป็นกระบวนการสี่ขั้นตอนในเวอร์ชันดั้งเดิม Firefox-ปลั๊กอิน IDE ภาพหน้าจอแต่ละภาพด้านล่างสอดคล้องกับขั้นตอนที่มีหมายเลขกำกับอยู่ข้างๆ

1. ไปที่ Selenium IDE แล้วคลิก ตัวเลือก -> ตัวเลือก…

   

2. ตัว Vortex Indicator ได้ถูกนำเสนอลงในนิตยสาร ทั่วไป ส่วนนี้ ให้เลือกตำแหน่งที่ตั้งของรายการที่สร้างขึ้นใหม่ Selenium ส่วนขยายหลัก

   

3. คลิก OK และรีสตาร์ท Selenium ไอดี.

   

4. คุณจะพบส่วนขยายได้ในรายการคำสั่ง

   

Selenium ส่วนขยายหลักเทียบกับ Selenium ส่วนขยาย IDE

ในเอกสารเก่าๆ มักใช้สองคำนี้สลับกันได้ แต่จริงๆ แล้วมันอธิบายถึงเลเยอร์ที่แตกต่างกัน และความแตกต่างนี้มีความสำคัญเมื่อคุณตัดสินใจว่าจะวางตรรกะที่กำหนดเองไว้ที่ใด

กล่าวโดยสรุป ส่วนขยาย Core จะเปลี่ยนสิ่งที่การทดสอบสามารถทำได้ ในขณะที่ส่วนขยาย IDE จะเปลี่ยนสิ่งที่เครื่องมือสามารถทำได้

สมัยใหม่เป็นอย่างไร Selenium IDE แทนที่ไฟล์ user-extensions.js

การขอ Firefox-เสียบเข้าไป Selenium IDE หยุดทำงานเมื่อ Firefox เปลี่ยนไปใช้สถาปัตยกรรม WebExtensions และ IDE ถูกเขียนใหม่ให้มีลักษณะคล้าย Chrome Firefox และส่วนขยายเบราว์เซอร์ Edge การเขียนโค้ดใหม่นี้ได้ลบช่องตัวเลือกที่แสดงด้านบนออกไป ดังนั้นจึงไม่มีที่ใดที่จะชี้ไปยังไฟล์ user-extensions.js ได้ ทางเลือกอื่นที่รองรับสองวิธีนั้นครอบคลุมเนื้อหาเดียวกัน

• คำสั่งเรียกใช้สคริปต์ สำหรับครั้งเดียว Javaสคริปต์ เพิ่ม เรียกใช้สคริปต์ or เรียกใช้สคริปต์แบบอะซิงโครนัส ดำเนินการทดสอบโดยตรงและเก็บผลลัพธ์ไว้ในตัวแปร นี่คือวิธีที่ใกล้เคียงที่สุดกับการสร้างแอ็กชันแบบกำหนดเองขนาดเล็ก
• ปลั๊กอิน สำหรับคำสั่งที่สามารถนำกลับมาใช้ซ้ำได้ ให้สร้างส่วนขยายเบราว์เซอร์ที่ลงทะเบียนไฟล์ Manifest กับ IDE ไฟล์ Manifest จะประกาศคำสั่งใหม่แต่ละคำสั่งด้วย ID ชื่อ ประเภท (ถ้ามี) และเอกสารประกอบ และอาจประกาศตัวระบุตำแหน่งใหม่ด้วย

การลงทะเบียนไฟล์ Manifest ทำได้โดยการส่งข้อความไปยังส่วนขยาย IDE ดังที่แสดงในเอกสารอย่างเป็นทางการ Selenium เอกสารประกอบปลั๊กอิน IDE.

browser.runtime.sendMessage(SIDE_ID, {
uri: "/register",
verb: "post",
payload: {
name: "Selenium IDE plugin",
version: "1.0.0",
commands: [
{ id: "textUpperCase", name: "text upper case" }
]
}
}).catch(console.error);

หลักการตั้งชื่อยังคงใช้ได้แม้หลังจากการย้ายระบบ: คำสั่งปลั๊กอินยังคงถูกประกาศเพียงครั้งเดียวแล้วนำกลับมาใช้ซ้ำในทุกการทดสอบ เช่นเดียวกับส่วนขยาย Core ทุกประการ

ส่วนขยายและปลั๊กอินยอดนิยมที่ใช้ใน Selenium IDE

ส่วนเสริมด้านล่างนี้เป็นส่วนเสริมที่ใช้กันอย่างแพร่หลายที่สุดใน IDE รุ่นเก่า หลายอย่าง เช่น การควบคุมการไหลของโปรแกรมและการจับภาพหน้าจอเมื่อเกิดข้อผิดพลาด ได้ถูกรวมเข้าไว้ใน IDE รุ่นปัจจุบันแล้ว หรือมีให้ใช้งานในรูปแบบปลั๊กอินที่ยังคงมีการดูแลรักษาอยู่

ของเก่า Seleniumหน้าดาวน์โหลดของ HQ ที่เคยมีไฟล์เหล่านี้อยู่ไม่มีอยู่อีกต่อไปแล้ว ปลั๊กอินปัจจุบันและตัว IDE เองนั้นถูกแจกจ่ายจาก [ที่อยู่เว็บไซต์ HQ] Selenium เว็บไซต์โครงการ IDE และจาก Chrome Firefox และร้านค้าส่วนเสริม Edge

ดาวน์โหลด Selenium Core Extension ที่ใช้ในบทช่วยสอนนี้

คำถามที่พบบ่อย