สวัสดีค่ะ วันนี้จะมาขอบันทึกไว้กันลืมกับการ Set up และ เขียน E2E Test ใน Flutter ค่ะ
ต้องบอกก่อนว่า Flutter เป็น tool ตัวนึงในการเขียนเป็น Mobile Application เราเลยไม่สามารถที่จะใช้ Robot หรือ Cypress ในการเขียน E2E Test ได้ เลยต้องใช้. Flutter test / Flutter Driver ในการเขียน E2E Test แทนทั้งนี้เราเลือกใช้เป็น Flutter Driver เพราะมีแพลตฟรอมในการเขียนคล้ายๆ cucumber ใน cypress ผสมกับการเขียน unit test หน่อยๆ ด้วยค่ะ เกริ่นมานานขอเริ่มเลยนะคะ
ก่อนอื่นขอแปะลิ้งค์นี้ไว้ให้ก่อนนะคะ เป็น library ที่. flutter driverมีให้ใช้ค่ะ
https://api.flutter.dev/flutter/flutter_driver/flutter_driver-library.html
เพิ่ม Dependenciesใน File: pubspec.yaml
สร้าง Folder test_driverโดยด้านใน Folder จะมีไฟล์ที่ชื่อว่า main.dart
เราจำเป็นต้องมาเพิ่มไฟล์ app.dart เป็นของตัวเองเนื่องจากถ้าเราใส่โค้ดตัวนี้ลงใน app.dart ที่เป็นของไฟล์รวม จะทำให้ keyboard ใน application เปิดไม่ขึ้นค่ะ
enableFlutterDriverExtension();
app.main();
จากนั้นก็เริ่มเขียนได้เลย เย้🎉
เราขออธิบายเกี่ยวกับ keywords ของ flutter driver ที่ใช้บ่อยๆ เป็นภาษาไทยคร่าวๆให้ฟังนะคะ
key = เป็นค่าที่เรา set key:Key(“ตัวแปร”) ใน code Flutter เพื่อเรียกใช้นะคะ ถ้าไม่ใส่เราจะไม่สามารถเขียน test ได้ค่ะ
find.byValueKey(ตัวแปร)
- เป็นการหาค่า key ใน code ส่วนใหญ่มักจะใช้ควบคู่ทุกอย่างที่ต้องการ
tap
- ใช้สำหรับคลิก input หรือกดปุ่ม
driver.tap(find.byValueKey(key));
enterText
- กรอกข้อมูล/ใส่ค่าลงใน input โดยส่วนใหญ่เรามักจะเห็น enterText มาพร้อมกับ tap
await driver.tap(find.byValueKey(key));
await driver.enterText(“password”);
getText
- เรียกค่าที่อยู่หน้าจอ ปุ่ม หรือข้อความที่ต้องการตรวจสอบ ส่วนใหญ่มักจะใช้ตรวจสอบ Modal ว่าค่าที่ get ออกมาตรงกับข้อความที่ต้องการหรือเปล่า
await driver.getText(find.byValueKey(key));
sleep
- ใช้สำหรับการรอ เช่นรอ application โหลดข้อมูล 3 วินาทีเป็นต้น
sleep(Duration(seconds: time));
scrollUntilVisible
- ใช้สำหรับต้องการเลื่อนหน้าจอ มีสองแบบดังนี้
- เลื่อนหน้าจอจากบนลงล่าง
จาก keyStart ไป keyEnd โดยที่ ค่า length บนลงล่าง ค่าที่ใส่จะติดลบ เช่น -500.00
await driver.scrollUntilVisible(
find.byValueKey(keyStart),
find.byValueKey(keyEnd),
dyScroll: length,
);
2. จากซ้ายไปขวา จาก keyStart ไป keyEnd
await driver.scrollUntilVisible(
find.byValueKey(keyStart),
find.byValueKey(keyEnd),
dxScroll: length,
);
หรือหากต้องการที่จะกดค้างก็ใส่เวลาเพิ่มเข้าไป โดย set ให้กดที่ key ตัวเดียว
await driver.scroll(find.byValueKey(key), 0, 0, Duration(milliseconds: 1500));
ตัวอย่างการเขียน Test
setUpAll()
- เป็นการเข้าทำงาน Function ตัวนี้ก่อนทุกครั้งก่อนจะเข้า Test ปกติ
tearDownAll()
- ทำงาน Function หลังจากรัน Test หมดทุก Test แล้ว
await driver.runUnsynchronized(() async {
Script…
});
เราพบว่าถ้าไม่ใส่ตัวนี้จะทำให้เรารันคำสั่งไม่ได้เพราะจะติด Timeout
ส่วนคำสั่งที่ใช้สำหรับ application ที่มีหน้า splash screen
await driver.waitUntilFirstFrameRasterized();
คำสั่ง Run Flutter driver
ทุกคนอาจจะสร้างไฟล์ .sh ไว้ใช้ run คำสั่งสั้นๆก็ได้ เช่นเราสร้างเป็นไฟล์ rune2etest ซึ่งข้างในมี code แบบนี้
เวลาทุกคน run ก็เพียงพิมพ์ใน command ว่า
./rune2etest test_driver/file_name.dart
หรือเพื่อน ๆ จะพิมพ์เต็มๆเวลา run ก็ได้นะคะ ใช้คำสั่งแบบนี้ได้เลย
ขอทดไว้แค่นี้ก่อนนะคะ เดี๋ยวมาต่อเรื่องการเขียน Function ที่เอาไว้ใช้เป็นตัวกลางและการเรียกใช้ค่ะ
