Add device emulation test to check for pixel ratios on new device

This is going to replace a layout test:
http/tests/devtools/a11y-axe-core/settings/emulated-device-a11y-test.js

Bug: 368238837
Change-Id: I143877e86091982c87daebd29a3edd15979bd409
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5952205
Reviewed-by: Simon Zünd <[email protected]>
Commit-Queue: Simon Zünd <[email protected]>
Auto-Submit: Kim-Anh Tran <[email protected]>

Author: ktran

test/e2e/emulation/custom-devices_test.ts

@@ -225,4 +225,22 @@ describe('Custom devices', () => {
     assert.strictEqual(await elementTextContent(fitButton), 'Fit to window (51%)');
     assert.strictEqual(await elementTextContent(zoomButton), '100%');
   });
+
+  it('shows an error if the pixel ratio is not a number', async () => {
+    await selectEdit();
+    await click(ADD_DEVICE_BUTTON_SELECTOR);
+    await waitFor(FOCUSED_DEVICE_NAME_FIELD_SELECTOR);
+    await typeText('Prime numbers');
+
+    await tabForward();  // Focus width.
+    await typeText('700');
+    await tabForward();  // Focus height.
+    await typeText('400');
+    await tabForward();  // Focus DPR.
+    await typeText('zzz.213213');
+
+    const error = await waitFor('.list-widget-input-validation-error');
+    const errorText = await error.evaluate(element => element.textContent);
+    assert.strictEqual(errorText, 'Device pixel ratio must be a number or blank.');
+  });
 });