ค้นพบวิธีแชร์การไหลเวียนของผู้ใช้ แก้ไขขั้นตอน และขั้นตอนของผู้ใช้ได้ในข้อมูลอ้างอิงฟีเจอร์ที่ครอบคลุมของแผงโปรแกรมอัดเสียงเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
หากต้องการดูข้อมูลเบื้องต้นเกี่ยวกับการทำงานกับแผงโปรแกรมอัดเสียง โปรดดูหัวข้อบันทึก เล่นซ้ำ และวัดการไหลเวียนของผู้ใช้
เรียนรู้และปรับแต่งทางลัด
ใช้แป้นพิมพ์ลัดเพื่อไปยังส่วนต่างๆ ของโปรแกรมอัดเสียงได้เร็วขึ้น โปรดดูรายการแป้นพิมพ์ลัดเริ่มต้นที่หัวข้อแป้นพิมพ์ลัดในแผงโปรแกรมอัดเสียง
หากต้องการเปิดคำแนะนำที่แสดงแป้นพิมพ์ลัดทั้งหมดในโปรแกรมอัดเสียง ให้คลิก แสดงทางลัดที่มุมขวาบน
หากต้องการปรับแต่งแป้นพิมพ์ลัดของโปรแกรมอัดเสียง ให้ทำดังนี้
- เปิด การตั้งค่า > ทางลัด
- เลื่อนลงไปที่ส่วนโปรแกรมอัดเสียง
- ทำตามขั้นตอนในหัวข้อปรับแต่งทางลัด
แก้ไขการไหลเวียนของผู้ใช้
ที่ด้านบนของแผงโปรแกรมอัดเสียง จะมีตัวเลือกให้คุณดำเนินการต่อไปนี้
- เพิ่มการบันทึกใหม่ คลิกไอคอน + เพื่อเพิ่มไฟล์บันทึกใหม่
- ดูการบันทึกทั้งหมด เมนูแบบเลื่อนลงจะแสดงรายการไฟล์บันทึกเสียงที่บันทึกไว้ เลือกตัวเลือก [จำนวน] ไฟล์บันทึกเสียง เพื่อขยายและจัดการรายการของไฟล์บันทึกเสียงที่บันทึกไว้
ส่งออกไฟล์บันทึกเสียง หากต้องการปรับแต่งสคริปต์เพิ่มเติมหรือแชร์สคริปต์เพื่อการรายงานข้อบกพร่อง คุณสามารถส่งออกการไหลเวียนของผู้ใช้ในรูปแบบใดรูปแบบหนึ่งต่อไปนี้
- ไฟล์ JSON
- @puppeteer/replay
- [Puppeteer](/docs/puppeteer/ สคริปต์
- Puppeteer (รวมถึงการวิเคราะห์ของ Lighthouse)
ดูข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบได้ที่ส่งออกการไหลเวียนของผู้ใช้
นำเข้าไฟล์บันทึกเสียง ในรูปแบบ JSON เท่านั้น
ลบไฟล์บันทึกเสียง ลบไฟล์บันทึกเสียงที่เลือก
นอกจากนี้ คุณยังแก้ไขชื่อการบันทึกได้โดยคลิกปุ่มแก้ไข ข้างชื่อไฟล์
แชร์การไหลเวียนของผู้ใช้
คุณส่งออกและนำเข้าการไหลเวียนของผู้ใช้ในโปรแกรมอัดเสียงได้ วิธีนี้มีประโยชน์ในการรายงานข้อบกพร่อง เนื่องจากคุณจะแชร์บันทึกที่ชัดเจนของขั้นตอนที่ทำให้เกิดข้อบกพร่องได้ นอกจากนี้ยังส่งออกและเล่นซ้ำโดยใช้ไลบรารีภายนอกได้ด้วย
ส่งออกการไหลเวียนของผู้ใช้
วิธีส่งออกโฟลว์ผู้ใช้
- เปิดโฟลว์ผู้ใช้ที่ต้องการส่งออก
- คลิก Export ที่ด้านบนของแผงโปรแกรมอัดเสียง
- เลือกรูปแบบใดรูปแบบหนึ่งต่อไปนี้จากรายการแบบเลื่อนลง
- ไฟล์ JSON ดาวน์โหลดข้อมูลที่บันทึกเป็นไฟล์ JSON
- @puppeteer/replay ดาวน์โหลดการบันทึกเป็นสคริปต์เล่นเตะหุ่นเชิดซ้ำ
- Puppeteer ดาวน์โหลดการบันทึกเป็นสคริปต์ Puppeteer
- Puppeteer (รวมถึงการวิเคราะห์ Lighthouse) ดาวน์โหลดไฟล์บันทึกเสียงเป็นสคริปต์ Puppeteer ที่มีการวิเคราะห์ Lighthouse ที่ฝังอยู่
- มีตัวเลือกอย่างน้อย 1 รายการโดยส่วนขยายการส่งออกของโปรแกรมอัดเสียง
- บันทึกไฟล์
คุณสามารถดำเนินการต่อไปนี้กับตัวเลือกการส่งออกเริ่มต้นแต่ละรายการ
- JSON แก้ไขออบเจ็กต์ JSON ที่มนุษย์อ่านได้ แล้วimportไฟล์ JSON กลับไปยังโปรแกรมอัดเสียง
- @puppeteer/replay เล่นสคริปต์ซ้ำด้วยไลบรารี Puppeteer Replay เมื่อส่งออกเป็นสคริปต์ @puppeteer/replay ขั้นตอนดังกล่าวจะยังเป็นออบเจ็กต์ JSON ตัวเลือกนี้เหมาะสมอย่างยิ่งหากคุณต้องการผสานรวมกับไปป์ไลน์ CI/CD แต่ยังคงมีความยืดหยุ่นในการแก้ไขขั้นตอนเป็น JSON แล้วแปลงและนําเข้ากลับไปยังโปรแกรมอัดเสียงในภายหลัง
- สคริปต์ Puppeteer เล่นสคริปต์ซ้ำด้วย Puppeteer เนื่องจากขั้นตอนดังกล่าวแปลงเป็น JavaScript คุณจึงปรับแต่งได้ละเอียดยิ่งขึ้น เช่น การวนซ้ำขั้นตอน โปรดทราบว่าคุณไม่สามารถนำเข้าสคริปต์นี้กลับเข้าไปในโปรแกรมอัดเสียงได้
Puppeteer (รวมถึงการวิเคราะห์ Lighthouse) ตัวเลือกการส่งออกนี้เหมือนกับตัวเลือกก่อนหน้า แต่มีโค้ดที่สร้างการวิเคราะห์ Lighthouse
เรียกใช้สคริปต์และตรวจสอบผลลัพธ์ในไฟล์
flow.report.html
:# npm i puppeteer lighthouse node your_export.js
ส่งออกในรูปแบบที่กำหนดเองโดยการติดตั้งส่วนขยาย
นําเข้าการไหลเวียนของผู้ใช้
วิธีนําเข้าการไหลเวียนของผู้ใช้
- คลิกปุ่ม Import ที่ด้านบนของแผงโปรแกรมอัดเสียง
- เลือกไฟล์ JSON ที่มีโฟลว์ผู้ใช้ที่บันทึกไว้
- คลิกปุ่มเล่นซ้ำเพื่อเรียกใช้โฟลว์ผู้ใช้ที่นำเข้า
เล่นซ้ำด้วยไลบรารีภายนอก
Puppeteer Replay เป็นไลบรารีโอเพนซอร์สที่ดูแลโดยทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สร้างขึ้นบน Puppeteer ซึ่งเป็นเครื่องมือบรรทัดคำสั่งที่ใช้เล่นไฟล์ JSON ซ้ำได้
นอกจากนี้คุณยังเปลี่ยนรูปแบบและเล่นไฟล์ JSON ซ้ำได้ด้วยไลบรารีของบุคคลที่สามดังต่อไปนี้
เปลี่ยนรูปแบบโฟลว์ผู้ใช้ JSON เป็นสคริปต์ที่กำหนดเอง
- Cypress Chrome Recorder ซึ่งคุณสามารถใช้เพื่อแปลงไฟล์ JSON สำหรับโฟลว์ผู้ใช้เป็นสคริปต์การทดสอบ Cypress ได้ รับชมการสาธิตนี้เพื่อดูการใช้งานจริง
- โปรแกรมอัดเสียง Chrome สำหรับโหมดกลางคืน ซึ่งคุณสามารถใช้เพื่อแปลงไฟล์ JSON สำหรับการไหลเวียนของผู้ใช้เป็นสคริปต์การทดสอบของ Nightwatch ได้
- CodeceptJS Chrome Recorder ซึ่งคุณสามารถใช้เพื่อแปลงไฟล์ JSON สำหรับโฟลว์ผู้ใช้เป็นสคริปต์ทดสอบ CodeceptJS ได้
เล่นโฟลว์ผู้ใช้ JSON ซ้ำ:
- เล่นซ้ำด้วย Testcafe คุณสามารถใช้ TestCafe เพื่อเล่นไฟล์ JSON ของการไหลเวียนของผู้ใช้ซ้ำและสร้างรายงานทดสอบสำหรับไฟล์บันทึกเสียงเหล่านี้ได้
- เล่นซ้ำด้วย Sause Labs คุณสามารถเล่นไฟล์ JSON ซ้ำบน Sauce Labs ได้โดยใช้ saucectl
แก้ไขข้อบกพร่องการไหลเวียนของผู้ใช้
บางครั้งคุณต้องแก้ไขข้อบกพร่องโฟลว์ของผู้ใช้ที่บันทึกไว้ เช่นเดียวกับโค้ดทั่วไป
แผงโปรแกรมอัดเสียงช่วยให้คุณชะลอการเล่นซ้ำ ตั้งค่าเบรกพอยท์ ดำเนินการก่อนดำเนินการ และตรวจสอบโค้ดในรูปแบบต่างๆ ควบคู่ไปกับขั้นตอนต่างๆ เพื่อช่วยแก้ไขข้อบกพร่อง
เล่นซ้ำช้าลง
โดยค่าเริ่มต้น โปรแกรมอัดเสียงจะเล่นตามการใช้งานของผู้ใช้ซ้ำโดยเร็วที่สุด หากต้องการทำความเข้าใจสิ่งที่เกิดขึ้นในการบันทึก คุณสามารถชะลอความเร็วในการเล่นซ้ำได้ดังนี้
- เปิดเมนูแบบเลื่อนลงเล่นซ้ำ
- เลือกตัวเลือกความเร็วในการเล่นซ้ำข้อใดข้อหนึ่งต่อไปนี้
- ปกติ (ค่าเริ่มต้น)
- ช้า
- ช้ามาก
- ช้าที่สุด
ตรวจสอบโค้ด
วิธีตรวจสอบโค้ดการไหลเวียนของผู้ใช้ในรูปแบบต่างๆ
- เปิดไฟล์บันทึกเสียงในแผงโปรแกรมอัดเสียง
- คลิกแสดงโค้ดที่มุมขวาบนของรายการขั้นตอน
- โปรแกรมอัดเสียงจะแสดงมุมมองของขั้นตอนและโค้ดที่อยู่ข้างกัน
- เมื่อวางเมาส์เหนือขั้นตอน โปรแกรมอัดเสียงจะไฮไลต์โค้ดที่เกี่ยวข้องในรูปแบบใดๆ ซึ่งรวมถึงโค้ดที่มาจากส่วนขยาย
ขยายรายการรูปแบบแบบเลื่อนลงเพื่อเลือกรูปแบบที่ใช้ส่งออกขั้นตอนของผู้ใช้
เป็นรูปแบบเริ่มต้น 1 ใน 3 รูปแบบ (JSON, @puppeteer/replay, สคริปต์ Puppeteer หรือรูปแบบที่ส่วนขยายมีให้
ดำเนินการต่อเพื่อแก้ไขข้อบกพร่องของการบันทึกโดยการแก้ไขพารามิเตอร์และค่าขั้นตอน มุมมองโค้ดไม่สามารถแก้ไขได้ แต่จะมีการอัปเดตให้สอดคล้องตามการเปลี่ยนแปลงขั้นตอนทางด้านซ้าย
ตั้งค่าเบรกพอยท์และดำเนินการทีละขั้นตอน
วิธีตั้งค่าเบรกพอยท์และดำเนินการทีละขั้นตอน
- วางเมาส์เหนือวงกลม ข้างขั้นตอนใดๆ ในไฟล์บันทึกเสียง วงกลมดังกล่าวจะเปลี่ยนเป็นไอคอนเบรกพอยท์
- คลิกไอคอนเบรกพอยท์ และเล่นการบันทึกซ้ำ การดำเนินการจะหยุดชั่วคราวที่เบรกพอยท์
- หากต้องการดำเนินการก่อนดำเนินการ ให้คลิกปุ่ม ดำเนินการ 1 ขั้นตอน ในแถบการทำงานที่ด้านบนของแผงโปรแกรมอัดเสียง
- หากต้องการหยุดเล่นซ้ำ ให้คลิก ยกเลิกการเล่นซ้ำ
แก้ไขขั้นตอน
คุณแก้ไขขั้นตอนใดก็ได้ในไฟล์บันทึกเสียงโดยคลิกปุ่ม ข้างขั้นตอนที่ต้องการ ทั้งในระหว่างการบันทึกและหลังจากนั้น
คุณยังสามารถเพิ่มขั้นตอนที่ขาดไปและลบขั้นตอนที่บันทึกโดยไม่ได้ตั้งใจออก
เพิ่มขั้นตอน
บางครั้งคุณอาจต้องเพิ่มขั้นตอนด้วยตนเอง ตัวอย่างเช่น โปรแกรมอัดเสียงจะไม่บันทึกเหตุการณ์ hover
โดยอัตโนมัติ เนื่องจากจะก่อให้เกิดมลพิษต่อการบันทึกและเหตุการณ์ดังกล่าวบางส่วนจะไม่มีประโยชน์ อย่างไรก็ตาม องค์ประกอบของ UI เช่น เมนูแบบเลื่อนลง จะปรากฏใน hover
เท่านั้น คุณสามารถเพิ่ม hover
ขั้นตอนด้วยตนเองลงในการไหลเวียนของผู้ใช้ที่ขึ้นอยู่กับองค์ประกอบดังกล่าวได้
วิธีเพิ่มขั้นตอนด้วยตนเอง
- เปิดหน้าสาธิตนี้แล้วเริ่มการบันทึกใหม่
- วางเมาส์เหนือองค์ประกอบในวิวพอร์ต เมนูการทำงานจะปรากฏขึ้น
- เลือกการทำงานจากเมนูและสิ้นสุดการบันทึก โปรแกรมอัดเสียงจะบันทึกเฉพาะเหตุการณ์การคลิก
- ลองเล่นการบันทึกซ้ำโดยคลิก เล่นซ้ำ การเล่นซ้ำจะไม่สำเร็จหลังจากหมดเวลาเนื่องจากโปรแกรมอัดเสียงเข้าถึงองค์ประกอบในเมนูไม่ได้
- คลิกปุ่ม 3 จุด ข้างขั้นตอนคลิก แล้วเลือกเพิ่มขั้นตอนก่อนหน้า
- ขยายขั้นตอนใหม่ จะมีประเภท
waitForElement
โดยค่าเริ่มต้น คลิกค่าข้างtype
แล้วเลือกhover
- จากนั้น ตั้งค่าตัวเลือกที่เหมาะสมสำหรับขั้นตอนใหม่ คลิก เลือก แล้วคลิกพื้นที่ในองค์ประกอบ
Hover over me!
ที่อยู่นอกเมนูป๊อปอัป ตัวเลือกมีการตั้งค่าเป็น#clickable
- ลองเล่นการบันทึกอีกครั้ง ขั้นตอนการวางเมาส์ที่เพิ่มเข้ามาช่วยให้โปรแกรมอัดเสียงเล่นซ้ำได้สำเร็จ
เพิ่มการยืนยัน
ในระหว่างการบันทึก คุณจะยืนยันสิทธิ์ได้ เช่น แอตทริบิวต์ HTML และพร็อพเพอร์ตี้ JavaScript วิธีเพิ่มการยืนยัน
- เริ่มการบันทึก เช่น ในหน้าสาธิตนี้
คลิกเพิ่มการยืนยัน
โปรแกรมอัดเสียงจะสร้างขั้นตอน
waitForElement
ที่กำหนดค่าได้ระบุตัวเลือกสำหรับขั้นตอนนี้
กำหนดค่าขั้นตอน แต่ไม่เปลี่ยนประเภท
waitForElement
ดังตัวอย่างต่อไปนี้- แอตทริบิวต์ HTML คลิกเพิ่มแอตทริบิวต์ แล้วพิมพ์ชื่อและค่าของแอตทริบิวต์ที่องค์ประกอบในหน้านี้ใช้ เช่น
data-test: <value>
- พร็อพเพอร์ตี้ JavaScript คลิกเพิ่มพร็อพเพอร์ตี้ แล้วพิมพ์ชื่อและค่าของพร็อพเพอร์ตี้ในรูปแบบ JSON เช่น
{".innerText":"<text>"}
- พร็อพเพอร์ตี้ขั้นตอนอื่นๆ เช่น
visible: true
- แอตทริบิวต์ HTML คลิกเพิ่มแอตทริบิวต์ แล้วพิมพ์ชื่อและค่าของแอตทริบิวต์ที่องค์ประกอบในหน้านี้ใช้ เช่น
ดำเนินการต่อเพื่อบันทึกการไหลเวียนที่เหลือของผู้ใช้ จากนั้นหยุดการบันทึก
คลิก เล่นซ้ำ หากการยืนยันล้มเหลว โปรแกรมอัดเสียงจะแสดงข้อผิดพลาดหลังจากหมดเวลา
ดูวิดีโอต่อไปนี้เพื่อดูการทำงานของเวิร์กโฟลว์นี้
คัดลอกขั้นตอน
คุณคัดลอกขั้นตอนเดียวไปยังคลิปบอร์ดแทนส่งออกขั้นตอนผู้ใช้ทั้งหมดได้ดังนี้
- คลิกขวาที่ขั้นตอนที่ต้องการคัดลอกหรือคลิกไอคอน 3 จุด ที่อยู่ติดกัน
- ในเมนูแบบเลื่อนลง ให้เลือกตัวเลือกคัดลอกเป็น ...
คุณคัดลอกขั้นตอนได้ในรูปแบบต่างๆ ได้แก่ JSON, Puppeteer, @puppeteer/replay รวมถึงรูปแบบที่มาจากส่วนขยาย
นำขั้นตอนออก
หากต้องการนำขั้นตอนที่บันทึกโดยไม่ได้ตั้งใจออก ให้คลิกขวาที่ขั้นตอนนั้นหรือคลิกไอคอน 3 จุด ข้างขั้นตอนนั้น แล้วเลือกนำขั้นตอนออก
นอกจากนี้ โปรแกรมอัดเสียงจะเพิ่มขั้นตอนแยกกัน 2 ขั้นตอนโดยอัตโนมัติในการเริ่มต้นการบันทึกทุกครั้ง ดังนี้
- ตั้งค่าวิวพอร์ต ให้คุณควบคุมมิติข้อมูล การปรับขนาด และพร็อพเพอร์ตี้อื่นๆ ของวิวพอร์ตได้
- ไปยังส่วนต่างๆ ตั้งค่า URL และรีเฟรชหน้าโดยอัตโนมัติทุกครั้งที่เล่นซ้ำ
หากต้องการใช้การทำงานอัตโนมัติในหน้าเว็บโดยไม่ต้องโหลดหน้าซ้ำ ให้นำขั้นตอนการนำทางออกตามที่อธิบายข้างต้น
กำหนดค่าขั้นตอน
วิธีกำหนดค่าขั้นตอน
ระบุประเภท:
click
,doubleClick
,hover
, (อินพุต)change
,keyUp
,keyDown
,scroll
,close
,navigate
(ในหน้าเว็บ),waitForElement
,waitForExpression
หรือsetViewport
พร็อพเพอร์ตี้อื่นๆ ขึ้นอยู่กับค่า
type
ระบุพร็อพเพอร์ตี้ที่จำเป็นใต้
type
คลิกปุ่มที่เกี่ยวข้องเพื่อเพิ่มคุณสมบัติที่เจาะจงประเภทซึ่งไม่บังคับ และระบุคุณสมบัตินั้นๆ
ดูรายการพร็อพเพอร์ตี้ที่ใช้ได้ที่พร็อพเพอร์ตี้ขั้นตอน
หากต้องการนำพร็อพเพอร์ตี้ที่ไม่บังคับออก ให้คลิกปุ่ม นำออกถัดจากพร็อพเพอร์ตี้นั้น
หากต้องการเพิ่มหรือนำองค์ประกอบออกจากพร็อพเพอร์ตี้อาร์เรย์ ให้คลิกปุ่ม + หรือ - ข้างองค์ประกอบนั้น
พร็อพเพอร์ตี้ของขั้นตอน
แต่ละขั้นตอนอาจมีพร็อพเพอร์ตี้ที่ไม่บังคับต่อไปนี้
target
- URL สำหรับเป้าหมาย Chrome DevTools Protocol (CDP) คีย์เวิร์ดmain
เริ่มต้นจะหมายถึงหน้าปัจจุบันassertedEvents
ที่ขณะนี้สามารถเป็นเหตุการณ์navigation
ได้เพียงเหตุการณ์เดียวเท่านั้น
พร็อพเพอร์ตี้ทั่วไปอื่นๆ ที่ใช้ได้กับขั้นตอนส่วนใหญ่มีดังนี้
frame
- อาร์เรย์ของดัชนีฐาน 0 ซึ่งระบุ iframe ที่ซ้อนได้ ตัวอย่างเช่น คุณสามารถระบุ iframe แรก (0) ใน iframe ที่สอง (1) ของเป้าหมายหลักเป็น[1, 0]
timeout
คือจำนวนมิลลิวินาทีที่ต้องรอก่อนดำเนินการขั้นตอน โปรดดูข้อมูลเพิ่มเติมที่หัวข้อปรับระยะหมดเวลาสำหรับขั้นตอนต่างๆselectors
อาร์เรย์ของตัวเลือก ดูข้อมูลเพิ่มเติมได้ที่ทำความเข้าใจตัวเลือก
พร็อพเพอร์ตี้เฉพาะของแต่ละประเภทมีดังนี้
ประเภท | พร็อพเพอร์ตี้ | จำเป็น | คำอธิบาย |
click doubleClick |
offsetX offsetY |
สัมพัทธ์กับด้านบนซ้ายของช่องเนื้อหาองค์ประกอบ หน่วยเป็นพิกเซล | |
click doubleClick |
button |
ปุ่มตัวชี้: หลัก | เสริม | วินาที | กลับ | ไปข้างหน้า | |
change |
value |
ค่าสุดท้าย | |
keyDown keyUp |
key |
ชื่อคีย์ | |
scroll |
x y |
เลื่อนแบบสัมบูรณ์ ตำแหน่ง x และ y เป็นพิกเซล ค่าเริ่มต้นคือ 0 | |
navigate |
url |
URL เป้าหมาย | |
waitForElement |
operator |
>= | == (ค่าเริ่มต้น) | <= | |
waitForElement |
count |
จำนวนองค์ประกอบที่ระบุโดยตัวเลือก | |
waitForElement |
attributes |
แอตทริบิวต์ HTML และค่าของแอตทริบิวต์ | |
waitForElement |
properties |
พร็อพเพอร์ตี้ JavaScript และค่าใน JSON | |
waitForElement |
visible |
บูลีน เป็นจริงหากองค์ประกอบอยู่ใน DOM และมองเห็นได้ (ไม่มี display: none หรือ visibility: hidden ) |
|
waitForElement waitForExpression |
asserted events |
ขณะนี้มีเพียง type: navigation เท่านั้น แต่คุณสามารถระบุชื่อและ URL ได้ |
|
waitForElement waitForExpression |
timeout |
ระยะเวลาสูงสุดที่จะรอเป็นมิลลิวินาที | |
waitForExpression |
expression |
นิพจน์ JavaScript ที่แก้ไขเป็น "จริง" | |
setViewport |
width height |
ความกว้างและความสูงของวิวพอร์ตเป็นพิกเซล | |
setViewport |
deviceScaleFactor |
คล้ายกับอัตราส่วนพิกเซลของอุปกรณ์ (DPR) โดยค่าเริ่มต้นคือ 1 | |
setViewport |
isMobile hasTouch isLandscape |
แฟล็กบูลีนที่กำหนดว่าจะดำเนินการต่อไปนี้หรือไม่ |
มีพร็อพเพอร์ตี้ 2 รายการต่อไปนี้ที่ทำให้การเล่นซ้ำหยุดชั่วคราว
พร็อพเพอร์ตี้
waitForElement
ทำให้ขั้นตอนรอการแสดง (หรือไม่มี) ขององค์ประกอบจำนวนหนึ่งที่ระบุโดยตัวเลือก ตัวอย่างเช่น ขั้นตอนต่อไปนี้จะรอให้องค์ประกอบน้อยกว่า 3 รายการอยู่ในหน้าที่ตรงกับตัวเลือก.my-class
"type": "waitForElement", "selectors": [".my-class"], "operator": "<=", "count": 2,
พร็อพเพอร์ตี้
waitForExpression
จะทำให้ขั้นตอนรอให้นิพจน์ JavaScript แก้ไขเป็น "จริง" ตัวอย่างเช่น ขั้นตอนต่อไปนี้จะหยุดชั่วคราวเป็นเวลา 2 วินาที แล้วเปลี่ยนเป็น "จริง" เพื่อให้การเล่นซ้ำดำเนินต่อไปได้"type": "waitForExpression", "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",
ปรับระยะหมดเวลาสำหรับจำนวนก้าว
ในกรณีที่หน้าเว็บมีคำขอของเครือข่ายที่ช้าหรือภาพเคลื่อนไหวที่ใช้เวลานาน การเล่นซ้ำอาจล้มเหลวในขั้นตอนที่เกินระยะหมดเวลาเริ่มต้น 5000
มิลลิวินาที
หากต้องการหลีกเลี่ยงปัญหานี้ คุณสามารถปรับระยะหมดเวลาเริ่มต้นสำหรับแต่ละขั้นตอนพร้อมกัน หรือตั้งค่าการหมดเวลาแยกต่างหากสำหรับขั้นตอนที่เฉพาะเจาะจง การหมดเวลาในบางขั้นตอนจะเขียนทับค่าเริ่มต้น
หากต้องการปรับระยะหมดเวลาเริ่มต้นสำหรับแต่ละขั้นตอนพร้อมกัน ให้ทำดังนี้
คลิกที่การตั้งค่าการเล่นซ้ำเพื่อให้ช่องหมดเวลาแก้ไขได้
ในช่องระยะหมดเวลา ให้ตั้งค่าระยะหมดเวลาเป็นมิลลิวินาที
คลิกเล่นซ้ำเพื่อดูระยะหมดเวลาเริ่มต้นที่ปรับแล้ว
วิธีเขียนทับระยะหมดเวลาเริ่มต้นในขั้นตอนที่เจาะจง
ขยายขั้นตอนแล้วคลิกเพิ่มระยะหมดเวลา
คลิกที่
timeout: <value>
และตั้งค่าเป็นมิลลิวินาทีคลิกเล่นซ้ำเพื่อดูขั้นตอนที่มีระยะหมดเวลา
หากต้องการนำการหมดเวลาซึ่งเขียนทับในขั้นตอนหนึ่งๆ ออก ให้คลิกปุ่มลบข้างขั้นตอนนั้น
ทำความเข้าใจตัวเลือก
เมื่อเริ่มการบันทึกใหม่ คุณจะกำหนดค่าต่อไปนี้ได้
- ในช่องข้อความแอตทริบิวต์ตัวเลือก ให้ป้อนแอตทริบิวต์การทดสอบที่กำหนดเอง โปรแกรมอัดเสียงจะใช้แอตทริบิวต์นี้เพื่อตรวจหาตัวเลือกแทนรายการแอตทริบิวต์การทดสอบทั่วไป
ในชุดช่องทำเครื่องหมายประเภทตัวเลือกที่จะบันทึก ให้เลือกประเภทของตัวเลือกที่จะตรวจหาโดยอัตโนมัติ ดังนี้
- CSS ตัวเลือกไวยากรณ์
- ARIA ตัวเลือกความหมาย
- ข้อความ ตัวเลือกที่มีข้อความที่ไม่ซ้ำกันสั้นที่สุด หากมี
- XPath ตัวเลือกที่ใช้ภาษาของเส้นทาง XML
- Pierce ตัวเลือกที่คล้ายกับ CSS แต่สามารถเจาะ Shadow DOM ได้
ตัวเลือกการทดสอบทั่วไป
สำหรับหน้าเว็บทั่วไป แอตทริบิวต์ id
และแอตทริบิวต์ CSS class
ถือว่าเพียงพอให้โปรแกรมอัดเสียงตรวจหาตัวเลือก แต่อาจไม่เป็นเช่นนั้นเสมอไปเนื่องจากเหตุผลต่อไปนี้
- หน้าเว็บของคุณอาจใช้คลาสแบบไดนามิกหรือรหัสที่มีการเปลี่ยนแปลง
- ตัวเลือกอาจใช้งานไม่ได้เนื่องจากโค้ดหรือเฟรมเวิร์กมีการเปลี่ยนแปลง
เช่น ค่า CSS class
อาจสร้างขึ้นโดยอัตโนมัติสำหรับแอปพลิเคชันที่พัฒนาด้วยเฟรมเวิร์ก JavaScript สมัยใหม่ (เช่น React, Angular, Vue) และเฟรมเวิร์ก CSS
ในกรณีเหล่านี้ คุณสามารถใช้แอตทริบิวต์ data-*
เพื่อสร้างการทดสอบที่ยืดหยุ่นมากขึ้น มีตัวเลือก data-*
ทั่วไปบางรายการที่นักพัฒนาแอปใช้สําหรับการทำงานอัตโนมัติอยู่แล้ว นอกจากนี้ โปรแกรมอัดเสียงยังรองรับเครื่องมือดังกล่าวด้วย
หากคุณกำหนดตัวเลือกการทดสอบทั่วไปดังต่อไปนี้ไว้ในเว็บไซต์ โปรแกรมอัดเสียงจะตรวจหาและใช้ตัวเลือกเหล่านั้นก่อนโดยอัตโนมัติ
data-testid
data-test
data-qa
data-cy
data-test-id
data-qa-id
data-testing
เช่น ตรวจสอบองค์ประกอบ "คาปูชิโน" ในหน้าสาธิตนี้ และดูแอตทริบิวต์การทดสอบ
บันทึกการคลิก "คาปูชิโน", ขยายขั้นตอนที่เกี่ยวข้องในไฟล์บันทึก และตรวจสอบตัวเลือกที่ตรวจพบ ดังนี้
ปรับแต่งตัวเลือกการบันทึก
คุณปรับแต่งตัวเลือกไฟล์บันทึกเสียงได้หากตัวเลือกการทดสอบทั่วไปไม่เหมาะกับคุณ
ตัวอย่างเช่น หน้าสาธิตนี้ใช้แอตทริบิวต์ data-automate
เป็นตัวเลือก เริ่มการบันทึกใหม่ แล้วป้อน data-automate
เป็นแอตทริบิวต์ตัวเลือก
กรอกอีเมลแล้วสังเกตค่าของตัวเลือก ([data-automate=email-address]
)
ลำดับความสำคัญของตัวเลือก
โปรแกรมอัดเสียงจะค้นหาตัวเลือกในลำดับต่อไปนี้ โดยขึ้นอยู่กับว่าคุณระบุแอตทริบิวต์ตัวเลือก CSS ที่กำหนดเองหรือไม่
- หากระบุ ให้ทำดังนี้
- ตัวเลือก CSS ที่มีแอตทริบิวต์ CSS ที่กำหนดเอง
- ตัวเลือก XPath
- ตัวเลือก ARIA หากพบ
- ตัวเลือกที่มีข้อความที่ไม่ซ้ำกันสั้นที่สุด หากพบ
- หากไม่ได้ระบุไว้ ให้ทำดังนี้
- ตัวเลือก ARIA หากพบ
- ตัวเลือก CSS ที่มีลำดับความสำคัญต่อไปนี้
- แอตทริบิวต์ที่ใช้บ่อยที่สุดในการทดสอบมีดังนี้
data-testid
data-test
data-qa
data-cy
data-test-id
data-qa-id
data-testing
- แอตทริบิวต์รหัส เช่น
<div id="some_ID">
- ตัวเลือก CSS ปกติ
- แอตทริบิวต์ที่ใช้บ่อยที่สุดในการทดสอบมีดังนี้
- ตัวเลือก XPath
- ตัวเลือกเพียร์
- ตัวเลือกที่มีข้อความที่ไม่ซ้ำกันสั้นที่สุด หากพบ
มีตัวเลือก CSS, XPath และ Pierce ปกติหลายรายการ โปรแกรมอัดเสียงจะบันทึกข้อมูลต่อไปนี้
- ตัวเลือก CSS และ XPath ปกติในทุกระดับรูท ซึ่งก็คือโฮสต์เงาที่ซ้อนกันอยู่ (หากมี)
- ตัวเลือกเพียร์ที่ไม่ซ้ำกันในองค์ประกอบทั้งหมดภายในรากเงาทั้งหมด