feat(queries): add "When I find elements by role"

src/queries/index.ts

@@ -15,6 +15,7 @@ export * from './last';
 export * from './link';
 export * from './name';
 export * from './placeholder';
+export * from './role';
 export * from './testid';
 export * from './text';
 export * from './textarea';

src/queries/role.ts

@@ -0,0 +1,52 @@
+import { DataTable, When } from '@badeball/cypress-cucumber-preprocessor';
+
+import { getOptions, setCypressElement } from '../utils';
+
+/**
+ * When I find elements by role:
+ *
+ * ```gherkin
+ * When I find elements by role {string}
+ * ```
+ *
+ * Queries for elements with the given role.
+ *
+ * @example
+ *
+ * ```gherkin
+ * When I find elements by role "progressbar"
+ * ```
+ *
+ * With [options](https://docs.cypress.io/api/commands/get#Arguments):
+ *
+ *
+ * ```gherkin
+ * When I find elements by role "progressbar"
+ *   | log | true |
+ *   | timeout | 4000 |
+ *   | withinSubject | null |
+ *   | includeShadowDom | false |
+ * ```
+ *
+ * @remarks
+ *
+ * This precedes steps like {@link When_I_click | "When I click"}. For example:
+ *
+ * ```gherkin
+ * When I find elements by role "progressbar"
+ *   And I get 1st element
+ *   And I click
+ * ```
+ *
+ * Inspired by Testing Library's [ByRole](https://testing-library.com/docs/queries/byrole/).
+ */
+export function When_I_find_elements_by_role(
+  role: string,
+  options?: DataTable,
+) {
+  setCypressElement(
+    cy.get(`[role=${JSON.stringify(role)}]:visible`, getOptions(options)),
+  );
+}
+
+When('I find elements by role {string}', When_I_find_elements_by_role);