🔖 หมวดบทเรียน: การทดสอบ UI ในแอป Flutter แบบอัตโนมัติ
📌 เหมาะสำหรับ: ผู้ที่ต้องการตรวจสอบว่า widget และการโต้ตอบในหน้าจอทำงานถูกต้อง
🎯 เป้าหมาย: เข้าใจวิธีเขียน Widget Test เพื่อจำลองการใช้งานจริง เช่น การแตะปุ่ม พิมพ์ข้อความ
🧭 เกริ่นนำ
Widget Test เป็นการทดสอบระดับกลาง (ระหว่าง Unit Test และ Integration Test) โดยจำลองการแสดงผลของ widget และการโต้ตอบต่าง ๆ เช่น การกดปุ่ม การกรอกฟอร์ม เพื่อตรวจสอบว่า UI ทำงานถูกต้องตามที่ตั้งใจ โดยไม่ต้องเปิดแอปจริง
⚙️ ติดตั้งแพ็กเกจ (หากยังไม่มี)
dev_dependencies:
flutter_test:
sdk: flutter
🧪 ตัวอย่างการเขียน Widget Test
สร้างหน้าทดสอบ simple counter
import 'package:flutter/material.dart';
class CounterPage extends StatefulWidget {
@override
_CounterPageState createState() => _CounterPageState();
}
class _CounterPageState extends State<CounterPage> {
int count = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('นับจำนวน')),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('คุณกดแล้ว:', key: Key('label')),
Text('$count', key: Key('counter'), style: TextStyle(fontSize: 32)),
ElevatedButton(
key: Key('increment'),
onPressed: () => setState(() => count++),
child: Text('เพิ่ม'),
),
],
),
);
}
}
เขียนไฟล์ counter_test.dart
import 'package:flutter_test/flutter_test.dart';
import 'package:flutter/material.dart';
import 'counter_page.dart';
void main() {
testWidgets('กดปุ่มแล้วค่าเพิ่ม', (WidgetTester tester) async {
await tester.pumpWidget(MaterialApp(home: CounterPage()));
expect(find.text('0'), findsOneWidget);
await tester.tap(find.byKey(Key('increment')));
await tester.pump();
expect(find.text('1'), findsOneWidget);
});
}
▶️ คำสั่งรัน test
flutter test test/counter_test.dart
✅ สรุป
- Widget Test จำลอง UI interaction และตรวจสอบผลลัพธ์แบบอัตโนมัติ
- ใช้
WidgetTester
เพื่อจำลองการแตะ พิมพ์ รอ UI rebuild - เหมาะกับการทดสอบ logic ที่ผูกกับ UI โดยไม่ต้องเปิด Emulator
ในบทถัดไป เราจะไปเรียนรู้เกี่ยวกับ การจัดการ State หลายระดับด้วย Nested Provider / ScopedModel / Riverpod