Golden tests for UI in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What does this golden test verify?

Consider this Flutter golden test code snippet:

testWidgets('Button golden test', (tester) async {
  await tester.pumpWidget(MaterialApp(home: Scaffold(body: ElevatedButton(onPressed: () {}, child: Text('Tap me')))));
  await expectLater(find.byType(ElevatedButton), matchesGoldenFile('button_golden.png'));
});

What is this test checking?

Flutter

testWidgets('Button golden test', (tester) async {
  await tester.pumpWidget(MaterialApp(home: Scaffold(body: ElevatedButton(onPressed: () {}, child: Text('Tap me')))));
  await expectLater(find.byType(ElevatedButton), matchesGoldenFile('button_golden.png'));
});

A It checks if the ElevatedButton widget looks exactly like the saved image 'button_golden.png'.

B It verifies the button's onPressed callback is called when tapped.

C It tests if the button's text is 'Tap me'.

D It ensures the button is enabled and clickable.

💡 Hint

Golden tests compare the widget's visual output to a saved image.

Golden tests capture the widget's rendered appearance and compare it to a reference image to detect unintended UI changes.

❓ lifecycle

intermediate

When should you update golden files?

You run a golden test and it fails because the UI changed intentionally. What is the correct next step?

A Ignore the failure and keep the old golden file.

B Delete the golden file to stop the test from running.

C Update the golden file to the new UI snapshot after verifying the change is expected.

D Change the test code to match the old UI.

💡 Hint

Golden files represent the expected UI snapshot.

When UI changes are intentional, update the golden files to reflect the new correct appearance to keep tests valid.

🔧 Debug

advanced

Why does this golden test fail with a pixel mismatch?

This golden test fails with a pixel mismatch error:

testWidgets('Text widget golden test', (tester) async {
  await tester.pumpWidget(MaterialApp(home: Scaffold(body: Text('Hello'))));
  await expectLater(find.byType(Text), matchesGoldenFile('text_golden.png'));
});

Possible cause?

A The test runs on different screen sizes or device pixel ratios causing rendering differences.

B The Text widget is missing a key property causing a crash.

C The golden file path is incorrect and file is missing.

D The test does not pump the widget before comparison.

💡 Hint

Golden tests are sensitive to device pixel ratio and screen size.

Golden tests can fail if run on different devices or environments with varying pixel densities or screen sizes, causing slight visual differences.

🧠 Conceptual

advanced

What is a key benefit of golden tests in UI development?

Why do developers use golden tests for UI components?

A To verify user input validation logic.

B To test backend API responses for UI data.

C To measure app performance during UI rendering.

D To detect unintended visual changes early by comparing UI snapshots automatically.

💡 Hint

Golden tests focus on visual correctness.

Golden tests help catch visual regressions by comparing the current UI rendering to a saved image, alerting developers to unexpected changes.

📝 Syntax

expert

Which option correctly sets up a golden test with a custom device pixel ratio?

You want to run a golden test with device pixel ratio 2.0 to avoid pixel mismatch errors. Which code snippet is correct?

Flutter

testWidgets('Custom DPR golden test', (tester) async {
  await tester.binding.setSurfaceSize(Size(200, 200));
  tester.binding.window.devicePixelRatioTestValue = 2.0;
  await tester.pumpWidget(MaterialApp(home: Scaffold(body: Container(color: Colors.red))));
  await expectLater(find.byType(Container), matchesGoldenFile('red_container.png'));
  tester.binding.window.clearDevicePixelRatioTestValue();
  await tester.binding.setSurfaceSize(null);
});

A Setting devicePixelRatioTestValue is not allowed and causes runtime error.

B The code above correctly sets device pixel ratio and surface size for the golden test.

C You only need to set surface size; device pixel ratio is ignored in golden tests.

D You must call tester.binding.window.setDevicePixelRatio(2.0) instead of devicePixelRatioTestValue.

💡 Hint

Flutter test binding allows overriding device pixel ratio for tests.

The code uses the correct Flutter test APIs to set device pixel ratio and surface size to control rendering for golden tests.