feat: add supported keys for keyDown step.

README.md

@@ -69,6 +69,21 @@ const stringifiedContent = await cypressStringifyChromeRecording(
 return stringifiedContent;
 ```
 
+## Supported Chrome Recorder Step Types
+
+Below are the step types that are currently supported:
+
+| Type        | Description                                   |
+| ----------- | --------------------------------------------- |
+| click       | becomes **cy.click(element)**                 |
+| change      | becomes **cy.get(element).type("text")**      |
+| keyDown     | becomes **cy.type("{key}")**                  |
+| navigate    | becomes **cy.visit("url")**                   |
+| setViewport | becomes **cy.viewport(width, height)**        |
+| scroll      | becomes **cy.scrollTo(${step.x}, ${step.y})** |
+
+If a step type is not supported (ie. `keyUp`) then a warning message will be displayed in the CLI.
+
 ## License
 
 [![license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/cypress-io/cypress-chrome-recorder/blob/master/LICENSE)

src/CypressStringifyExtension.ts

@@ -1,6 +1,9 @@
 import { LineWriter, Schema, StringifyExtension } from '@puppeteer/replay';
 
-// import { recorderChangeTypes } from './constants.js';
+import {
+  SupportedRecorderKeysKeys,
+  supportedRecorderKeys,
+} from './constants.js';
 
 export class CypressStringifyExtension extends StringifyExtension {
   async beforeAllSteps(out: LineWriter, flow: Schema.UserFlow): Promise<void> {
@@ -43,6 +46,10 @@ export class CypressStringifyExtension extends StringifyExtension {
         return this.#appendScrollStep(out, step, flow);
       case 'navigate':
         return this.#appendNavigationStep(out, step);
+      case 'keyDown':
+        return this.#appendKeyDownStep(out, step);
+      case 'keyUp':
+        return;
       default:
         return assertAllValidStepTypesAreHandled(step);
     }
@@ -78,6 +85,16 @@ export class CypressStringifyExtension extends StringifyExtension {
     out.appendLine('');
   }
 
+  #appendKeyDownStep(out: LineWriter, step: Schema.KeyDownStep): void {
+    const pressedKey = step.key.toLowerCase() as SupportedRecorderKeysKeys;
+
+    if (pressedKey in supportedRecorderKeys) {
+      const keyValue = supportedRecorderKeys[pressedKey];
+      out.appendLine(`cy.type(${formatAsJSLiteral(`{${keyValue}}`)});`);
+      out.appendLine('');
+    }
+  }
+
   #appendNavigationStep(out: LineWriter, step: Schema.NavigateStep): void {
     out.appendLine(`cy.visit(${formatAsJSLiteral(step.url)});`);
     out.appendLine('');
@@ -142,6 +159,6 @@ function handleSelectors(
 
 function assertAllValidStepTypesAreHandled(step: Schema.Step): void {
   console.log(
-    `Cypress does not currently handle migrating step type: ${step.type}`
+    `Warning: Cypress does not currently handle migrating steps of type: ${step.type}. Please check the output to see how this might affect your test.`
   );
 }

src/constants.ts

@@ -21,4 +21,51 @@ export const recorderChangeTypes: RecorderChangeTypes[] = [
   'email',
 ];
 
+export type SupportedRecorderKeysKeys =
+  | 'backspace'
+  | 'enter'
+  | 'arrowUp'
+  | 'arrowDown'
+  | 'arrowLeft'
+  | 'arrowRight'
+  | 'escape'
+  | 'pageUp'
+  | 'pageDown'
+  | 'end'
+  | 'home'
+  | 'insert';
+
+type SupportedRecorderKeysValues =
+  | 'backspace'
+  | 'enter'
+  | 'upArrow'
+  | 'downArrow'
+  | 'leftArrow'
+  | 'rightArrow'
+  | 'esc'
+  | 'pageUp'
+  | 'pageDown'
+  | 'end'
+  | 'home'
+  | 'insert';
+
+type SupportedRecorderKeys = {
+  [key in SupportedRecorderKeysKeys]: SupportedRecorderKeysValues;
+};
+
+export const supportedRecorderKeys: SupportedRecorderKeys = {
+  backspace: 'backspace',
+  enter: 'enter',
+  arrowUp: 'upArrow',
+  arrowDown: 'downArrow',
+  arrowLeft: 'leftArrow',
+  arrowRight: 'rightArrow',
+  escape: 'esc',
+  pageUp: 'pageUp',
+  pageDown: 'pageDown',
+  end: 'end',
+  home: 'home',
+  insert: 'insert',
+};
+
 export const defaultOutputFolder = 'cypress/integration';

test/CypressStringifyExtension_test.ts

@@ -1,6 +1,11 @@
 import { assert } from 'chai';
 import { LineWriterImpl } from './LineWriterImpl.js';
 import { CypressStringifyExtension } from '../src/CypressStringifyExtension.js';
+import {
+  SupportedRecorderKeysKeys,
+  supportedRecorderKeys,
+} from '../dist/constants.js';
+import { Schema } from '@puppeteer/replay';
 
 describe('CypressStringifyExtension', function () {
   it('correctly exports Chrome Recorder click step', async function () {
@@ -110,7 +115,41 @@ describe('CypressStringifyExtension', function () {
     assert.equal(writer.toString(), '');
   });
 
-  it('correctly handles keyUp step type', async function () {
+  it('correctly handles keyDown step types that are supported', async function () {
+    Object.keys(supportedRecorderKeys).map(async (key) => {
+      const ext = new CypressStringifyExtension();
+      const step = {
+        type: 'keyDown' as const,
+        target: 'main',
+        key: supportedRecorderKeys[
+          key as SupportedRecorderKeysKeys
+        ].toUpperCase() as Schema.Key,
+      };
+      const flow = { title: 'keyUp step', steps: [step] };
+      const writer = new LineWriterImpl('  ');
+
+      await ext.stringifyStep(writer, step, flow);
+
+      assert.equal(writer.toString(), `cy.type("{${key}}");\n`);
+    });
+  });
+
+  it('correctly handles keyDown step type that are not supported', async function () {
+    const ext = new CypressStringifyExtension();
+    const step = {
+      type: 'keyDown' as const,
+      target: 'main',
+      key: 'Meta' as const,
+    };
+    const flow = { title: 'keyUp step', steps: [step] };
+    const writer = new LineWriterImpl('  ');
+
+    await ext.stringifyStep(writer, step, flow);
+
+    assert.equal(writer.toString(), '');
+  });
+
+  it('correctly handles keyUp step type by ignoring it for now', async function () {
     const ext = new CypressStringifyExtension();
     const step = {
       type: 'keyUp' as const,