arrow-left Back to topicQuizVS CodeCheck yourself1.You want to find the right locator for a button that's hard to select. You're in VS Code with the extension installed. What's the fastest way?Open browser DevTools → right-click → Copy selectorClick 'Pick locator' in the Playwright sidebar — click the element in the browser, Playwright suggests the best locatorUse page.locator() with a CSS selector guessed from the class names2.How do you install the Playwright VS Code extension and create the initial playwright.config.ts?Run npx playwright install in the terminal — it installs both the extension and config automaticallySearch 'Playwright' in the Extensions panel, install the Microsoft extension, then open Command Palette and run 'Test: Install Playwright'Copy a playwright.config.ts from GitHub and install the extension from the VS Code marketplace websiteInstall via npm install @playwright/test and reload the editor — VS Code detects it automatically3.What does the 'Show Browser' feature do in the Playwright VS Code extension?It opens a browser screenshot in the editor sidebar after the test finishesIt launches a visible browser window while tests run so you can watch them execute in real timeIt opens the Playwright Trace Viewer in the browser after test failureIt displays a list of all browsers installed on the system4.You right-click a test in the VS Code Test Explorer and see 'Debug Test'. What happens when you click it after setting a breakpoint?The test runs in headed mode and a trace is automatically recordedThe test pauses at the breakpoint and you can inspect variables in the VS Code Debug panelThe Playwright Inspector opens and you can step through actions one by oneThe test runs twice — once normally and once in slow motion5.What does 'Show Trace Viewer' do in the VS Code Playwright sidebar?It opens the Trace Viewer after a test run, showing the full timeline, DOM snapshots, and network tab for debugging failuresIt records a video of the test run and plays it back in slow motionIt shows CPU and memory usage of the browser during the testIt displays the browser console logs inline in the editor6.You have three browser projects configured (Chromium, Firefox, WebKit). How do you run tests against only Firefox from the VS Code Test Explorer?Edit playwright.config.ts to comment out Chromium and WebKit, then runCheck only the Firefox checkbox in the browser projects section of the Playwright sidebar, then run testsUse the terminal and run npx playwright test --project=firefox — the VS Code UI has no way to filter by projectRight-click the test file and choose 'Run with Firefox'7.With 'Show Browser' enabled, you click on a locator expression in your test code. What happens in the browser window?The test runs from that locator line onwardsThe matching element is highlighted in the live browser windowVS Code shows the element's HTML in a hover tooltipThe locator is copied to clipboard for reuse8.You have two playwright.config.ts files — one for unit tests and one for e2e tests. How do you switch between them in VS Code?Rename the config file you want to use to playwright.config.ts and reloadUse the gear icon in the Playwright sidebar to switch between config filesOpen VS Code settings and set the playwright.configFile preferenceSet a PLAYWRIGHT_CONFIG environment variable before launching VS CodeSubmit answersarrow-left PreviousIntroduction to PlaywrightWriting your first testsNext arrow-right