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.

Practice

1. What is the main purpose of a golden test in Flutter UI testing?

easy

A. To compare the current UI rendering with a saved image to detect visual changes

B. To test the performance speed of UI animations

C. To check if the UI code compiles without errors

D. To verify the network requests made by the UI

Solution

1. Step 1: Understand the purpose of golden tests

   Golden tests compare the UI's current look to a saved image to find visual differences.

2. Step 2: Eliminate unrelated options

   Performance, compilation, and network checks are not the focus of golden tests.

3. Final Answer:

   To compare the current UI rendering with a saved image to detect visual changes -> Option A

4. Quick Check:

   Golden test purpose = Visual comparison [OK]

Hint: Golden tests check UI images, not code or speed [OK]

Common Mistakes:

• Confusing golden tests with performance tests
• Thinking golden tests check code syntax
• Assuming golden tests verify network calls

2. Which Flutter test function is used to compare a widget's UI to a golden file?

easy

A. runApp(widget).toMatchGolden('golden.png')

B. expect(widget, equals('golden.png'))

C. testWidgets('golden test', () => expect(widget, isTrue))

D. expectLater(widget, matchesGoldenFile('golden.png'))

Solution

1. Step 1: Identify the correct golden test syntax

   The function expectLater with matchesGoldenFile is the standard way to compare UI to a golden image.

2. Step 2: Check other options for correctness

   Options B, C, and D use incorrect or non-existent syntax for golden tests.

3. Final Answer:

   expectLater(widget, matchesGoldenFile('golden.png')) -> Option D

4. Quick Check:

   Golden test syntax = expectLater + matchesGoldenFile [OK]

Hint: Use expectLater with matchesGoldenFile for golden tests [OK]

Common Mistakes:

• Using expect instead of expectLater
• Missing matchesGoldenFile matcher
• Trying to call golden test on runApp directly

3. Given this Flutter golden test snippet:

testWidgets('Button golden test', (tester) async {
  await tester.pumpWidget(MyButton());
  await expectLater(find.byType(MyButton), matchesGoldenFile('button.png'));
});

What will happen if the current button UI differs visually from 'button.png'?

medium

A. The test will throw a syntax error

B. The test will fail indicating a visual mismatch

C. The test will pass regardless of UI differences

D. The test will skip without running

Solution

1. Step 1: Understand golden test behavior on mismatch

   If the rendered UI does not match the saved golden image, the test fails to alert visual changes.

2. Step 2: Verify other options

   Passing despite differences, syntax errors, or skipping are not expected behaviors here.

3. Final Answer:

   The test will fail indicating a visual mismatch -> Option B

4. Quick Check:

   Golden test mismatch = test failure [OK]

Hint: Golden test fails if UI differs from saved image [OK]

Common Mistakes:

• Expecting test to pass despite UI changes
• Confusing runtime errors with test failures
• Thinking golden tests skip on mismatch

4. Identify the error in this golden test code snippet:

testWidgets('Screen golden test', (tester) async {
  await tester.pumpWidget(MyScreen());
  expect(find.byType(MyScreen), matchesGoldenFile('screen.png'));
});

medium

A. Using expect instead of expectLater for matchesGoldenFile

B. Missing await before tester.pumpWidget

C. Incorrect widget type passed to find.byType

D. Golden file name should be a full path

Solution

1. Step 1: Check the matcher usage

   Golden tests require expectLater with matchesGoldenFile to work asynchronously.

2. Step 2: Validate other parts

   Await is correctly used with pumpWidget, widget type is correct, and relative file names are allowed.

3. Final Answer:

   Using expect instead of expectLater for matchesGoldenFile -> Option A

4. Quick Check:

   Golden test needs expectLater, not expect [OK]

Hint: Use expectLater, not expect, with matchesGoldenFile [OK]

Common Mistakes:

• Using expect instead of expectLater
• Forgetting async/await on pumpWidget
• Assuming golden file needs full absolute path

5. You want to write a golden test for a button that changes color based on theme. Which approach ensures your golden test covers both light and dark themes correctly?

hard

A. Skip golden tests for theme changes and rely on manual testing

B. Write one golden test with default theme only, assuming dark theme looks similar

C. Write separate golden tests pumping the button with light and dark theme widgets and compare to separate golden files

D. Use a single golden file and toggle theme at runtime without repumping widget

Solution

1. Step 1: Understand theme impact on UI

   Light and dark themes can change colors significantly, so testing both separately is needed.

2. Step 2: Evaluate testing approaches

   Separate tests with repumping widgets under each theme and comparing to distinct golden files ensures accurate visual checks.

3. Final Answer:

   Write separate golden tests pumping the button with light and dark theme widgets and compare to separate golden files -> Option C

4. Quick Check:

   Test each theme separately with distinct golden files [OK]

Hint: Test light and dark themes separately with different golden files [OK]

Common Mistakes:

• Assuming one golden file covers all themes
• Not repumping widget after theme change
• Skipping golden tests for theme variations