The Chromium Chronicle #4: ทดสอบฟีเจอร์แพลตฟอร์มเว็บของคุณด้วย WPT

Episode 4: โดย Robert in Waterloo เมื่อวันที่ (กรกฎาคม 2019)
ตอนก่อนหน้า

ถ้าใช้ Blink ก็อาจรู้จัก web_tests (เดิมคือ LayoutTests) เลย ซึ่งการทดสอบเว็บ-แพลตฟอร์ม (WPT) จะอยู่ใน web_test/external/wpt WPT เป็นวิธีที่แนะนำในการทดสอบฟีเจอร์ที่แสดงบนเว็บ เนื่องจากระบบจะแชร์กับเบราว์เซอร์อื่นผ่าน GitHub ซึ่งประกอบด้วยการทดสอบ 2 ประเภทหลักๆ ได้แก่ การทดสอบ reftests และ testharness.js

reftest ถ่ายและเปรียบเทียบภาพหน้าจอของ 2 หน้า โดยค่าเริ่มต้น ระบบจะบันทึกภาพหน้าจอหลังจากที่เหตุการณ์ load เริ่มทํางาน หากคุณเพิ่มคลาส reftest-wait ลงในองค์ประกอบ <html> ระบบจะถ่ายภาพหน้าจอเมื่อนำคลาสออก การทดสอบที่ปิดใช้จะทำให้การครอบคลุมของการทดสอบลดลง โปรดระวังความไม่สม่ำเสมอที่เกี่ยวข้องกับแบบอักษร ให้ใช้แบบอักษร Ahem หากเป็นไปได้

testharness.js เป็นเฟรมเวิร์ก JavaScript สำหรับการทดสอบทุกอย่างยกเว้นการแสดงผล เมื่อเขียนการทดสอบ testharness.js โปรดให้ความสำคัญกับการกำหนดเวลา และอย่าลืมจัดระเบียบสถานะทั่วโลก

ระยะหมดเวลาที่ไม่น่าเชื่อถือและสถานะรั่วไหลที่อาจเกิดขึ้น:

ไม่ควรทำ
<script>
promise_test(async t => {
  assert_equals(await slowLocalStorageTest(), "expected", "message");
  localStorage.clear();
});
</script>

การทดสอบที่ดีกว่าเดิมด้วยการล้างและระยะหมดเวลาที่ยาวนาน:

ควรทำ
<meta name="timeout" content="long">
<script>
promise_test(async t => {
  t.add_cleanup(() => localStorage.clear());
  assert_equals(await slowLocalStorageTest(), "expected", "message");
});
</script>

ใช้ testdriver.js หากต้องการใช้การทำงานอัตโนมัติที่ไม่มีในเว็บ คุณสามารถดูท่าทางสัมผัสของผู้ใช้จาก test_driver.bless, สร้างอินพุตที่ซับซ้อน เชื่อถือได้ด้วย test_driver.action_sequence ฯลฯ

WPT ยังมอบฟีเจอร์ฝั่งเซิร์ฟเวอร์ที่มีประโยชน์บางส่วนเกี่ยวกับชื่อไฟล์ด้วย การทดสอบทั่วโลก (.any.js และเพื่อน) ทำการทดสอบเดียวกันในขอบเขตที่แตกต่างกัน (window, worker ฯลฯ) .https.sub.html ขอให้โหลดการทดสอบผ่าน HTTPS โดยรองรับการแทนที่ฝั่งเซิร์ฟเวอร์ดังตัวอย่างต่อไปนี้

var anotherOrigin = "https://&#123;&#123;hosts[][www1]}}:&#123;&#123;ports[https][0]}}/path/to/page.html";

คุณเปิดใช้ฟีเจอร์บางอย่างในสตริงการค้นหาได้ด้วย baz.html?pipe=sub|header(X-Key,val)|trickle(d1) เปิดใช้การแทนที่ เพิ่ม X-Key: val ในส่วนหัวของการตอบกลับ และหน่วงเวลา 1 วินาทีก่อนตอบกลับ ให้ค้นหา "ไปป์" ใน web-platform-tests.org

WPT ยังทดสอบลักษณะการทำงานที่ไม่มีอยู่ในข้อมูลจำเพาะได้อีกด้วย เพียงตั้งชื่อการทดสอบเป็น .tentative หากคุณจำเป็นต้องใช้ API ภายในของ Blink (เช่น testRunner, internals) ให้ทำการทดสอบใน web_tests/wpt_internal

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

# TEAM: your-team@chromium.org
# COMPONENT: Blink>YourComponent
# WPT-NOTIFY: true
emails-here-will-be-cc@chromium.org

แหล่งข้อมูลเพิ่มเติม

  • อยากรู้ไหมว่าการทดสอบในเบราว์เซอร์อื่นๆ ทำงานเป็นอย่างไร และฟีเจอร์ของคุณช่วยกันทำงานได้ดีเพียงใด ใช้ wpt.fyi
  • หากต้องการดูเอกสารประกอบเพิ่มเติมเกี่ยวกับ API, หลักเกณฑ์, ตัวอย่าง, เคล็ดลับ และอื่นๆ ไปที่ web-platform-tests.org