fix(queries): include value and escape text in button steps

src/queries/button.ts

@@ -1,6 +1,9 @@
 import { When } from '@badeball/cypress-cucumber-preprocessor';
 
-import { getCypressElement, setCypressElement } from '../utils';
+import {
+  setCypressElementByButtonText,
+  setCypressElementsByButtonText,
+} from '../utils';
 
 /**
  * When I find buttons by text:
@@ -30,10 +33,7 @@ import { getCypressElement, setCypressElement } from '../utils';
  * - {@link When_I_find_button_by_text | When I find button by text}
  */
 export function When_I_find_buttons_by_text(text: string) {
-  const selector = ['button', "[type='button']", "[type='submit']"]
-    .map((value) => `${value}:contains('${text}'):visible`)
-    .join(',');
-  setCypressElement(cy.get(selector));
+  setCypressElementsByButtonText(text);
 }
 
 When('I find buttons by text {string}', When_I_find_buttons_by_text);
@@ -67,8 +67,7 @@ When('I find buttons by text {string}', When_I_find_buttons_by_text);
  * - {@link When_I_find_buttons_by_text | When I find buttons by text}
  */
 export function When_I_find_button_by_text(text: string) {
-  When_I_find_buttons_by_text(text);
-  setCypressElement(getCypressElement().first());
+  setCypressElementByButtonText(text);
 }
 
 When('I find button by text {string}', When_I_find_button_by_text);

src/utils/button.ts

@@ -0,0 +1,74 @@
+/* eslint-disable tsdoc/syntax */
+
+import { setCypressElement } from '../utils';
+
+/**
+ * Set Cypress elements by button text:
+ *
+ * ```ts
+ * setCypressElementsByButtonText('...');
+ * ```
+ *
+ * @example
+ *
+ * ```ts
+ * setCypressElementsByButtonText('Text');
+ * ```
+ *
+ * @see
+ *
+ * - {@link getCypressElement}
+ * - {@link setCypressElement}
+ *
+ * @param text - Button text.
+ * @returns - Cypress element.
+ *
+ * @private
+ */
+export function setCypressElementsByButtonText(text: string) {
+  const buttons = [
+    'button',
+    "[type='button']",
+    "[type='submit']",
+    "[role='button']",
+  ];
+  const selector1 = buttons
+    .map((selector) => `${selector}:contains(${JSON.stringify(text)}):visible`)
+    .join(',');
+  const selector2 = buttons
+    .map((selector) => `${selector}[value=${JSON.stringify(text)}]:visible`)
+    .join(',');
+  const elements = cy.get(`${selector1},${selector2}`);
+  setCypressElement(elements);
+  return elements;
+}
+
+/**
+ * Set Cypress element by button text:
+ *
+ * ```ts
+ * setCypressElementByButtonText('...');
+ * ```
+ *
+ * @example
+ *
+ * ```ts
+ * setCypressElementByButtonText('Text');
+ * ```
+ *
+ * @see
+ *
+ * - {@link getCypressElement}
+ * - {@link setCypressElement}
+ *
+ * @param text - Button text.
+ * @returns - Cypress element.
+ *
+ * @private
+ */
+export function setCypressElementByButtonText(text: string) {
+  const elements = setCypressElementsByButtonText(text);
+  const element = elements.first();
+  setCypressElement(element);
+  return element;
+}

src/utils/index.ts

@@ -1,3 +1,4 @@
+export * from './button';
 export * from './display-value';
 export * from './element';
 export * from './label';