Front End Development Quality Control & Assurance 3 — Questions and Answers
Question 1: Which Lighthouse metric measures the time until the largest visible content element is fully rendered?
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP) (Correct answer)
- Time to Interactive (TTI)
- Cumulative Layout Shift (CLS)
Correct answer: Largest Contentful Paint (LCP)
LCP measures when the largest image or text block in the viewport becomes fully visible, targeting under 2.5 seconds.
Question 2: What does 'regression testing' specifically guard against in front-end development?
- New feature bugs before release
- Previously working functionality breaking due to new changes (Correct answer)
- Performance degradation in CI
- Accessibility issues in new components
Correct answer: Previously working functionality breaking due to new changes
Regression tests re-run existing scenarios after changes to confirm that previously working features still work.
Question 3: A developer uses `React Testing Library`'s `userEvent.type()` instead of `fireEvent.change()`. What is the advantage?
- It skips React's synthetic event system
- It simulates real user interactions including keydown, keypress, and keyup events (Correct answer)
- It is synchronous and faster
- It bypasses component lifecycle hooks
Correct answer: It simulates real user interactions including keydown, keypress, and keyup events
userEvent.type() fires the full sequence of keyboard events a real user would generate, making tests more realistic.
Question 4: What is the role of a 'test pyramid' in front-end QA strategy?
- Prioritizing UI tests because they catch the most bugs
- Having many unit tests, fewer integration tests, and the fewest E2E tests (Correct answer)
- Running all test types simultaneously in CI
- A tool for visualizing code coverage
Correct answer: Having many unit tests, fewer integration tests, and the fewest E2E tests
The test pyramid advocates for a large base of fast unit tests, a middle layer of integration tests, and a small top of slow E2E tests.
Question 5: When using Playwright for E2E testing, what does `page.waitForSelector()` accomplish?
- Selects all matching DOM elements for assertion
- Pauses execution until a matching element appears in the DOM (Correct answer)
- Clicks the first element matching the selector
- Injects a CSS selector into the page
Correct answer: Pauses execution until a matching element appears in the DOM
waitForSelector pauses the test until the specified element exists and is visible, preventing race conditions.
Question 6: Which practice helps prevent 'test pollution' between unit tests in Jest?
- Using a single shared mock object across all tests
- Calling `beforeEach` to reset mocks and state before each test (Correct answer)
- Running tests sequentially with `--runInBand`
- Disabling garbage collection between tests
Correct answer: Calling `beforeEach` to reset mocks and state before each test
Resetting mocks and state in beforeEach ensures each test starts clean and doesn't depend on previous test side effects.
Question 7: What does 'branch coverage' measure in code coverage metrics?
- The number of Git branches with test files
- Whether every possible path through conditional logic has been executed by tests (Correct answer)
- The percentage of functions called during tests
- The number of lines executed at least once
Correct answer: Whether every possible path through conditional logic has been executed by tests
Branch coverage tracks whether both the true and false paths of every if/else, ternary, and switch have been exercised.
Front End Development Quality Control & Assurance 3
Which Lighthouse metric measures the time until the largest visible content element is fully rendered?