Cypress locate elements within a modal type modal-content

Question

I am doing some tests with Cypress where pressing a button displays a modal and within the modal I must locate and click a button.

Steps that the test performs:

Enter https://www.kfc.co/
Select the 'Menu' option
Select the 'Combos' category
Select the first product

So far so good.

Performing step 4 opens a modal from which I want to select the 'Add to Cart' button.

Here at this point Cypress fails with the following error:

Trace complete

I have the following code

import { Given, When, Then } from "@badeball/cypress-cucumber-preprocessor";

Given("ingrese a la plataforma {string}", (url) => {
  cy.visit(url);
});

When("seleccione el producto {string} de la categoria {string} deseado", (productName, categoryName) => {
  cy.get('[data-rs-event-name="Select Menu"] > a').click();
  cy.get(`[data-category-name="${categoryName}"]`).click();
  cy.get(`[title="${productName}"`).parents("a").find("button").click();
});

When("adiciono toppings, comentario y agrego el producto a la canasta", ()=>{
  cy.get('#add-to-cart-button').click();
})

the DOM of the web page when displaying the modal is in https://www.kfc.co/ a part of her:

<div id="add-to-cart-modal" class="add-to-cart-modal modal hide fade show" tabindex="-1" role="dialog" style="display: block; padding-right: 21px;" aria-modal="true">
  <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable modal-product-preview" role="document">
<div class="modal-content">
  <form id="add-to-cart-form" class="add-to-cart-form add-to-cart-form-modal" data-channel="delivery" data-product-price="10900.0" data-product-summary="{&quot;ot;}]}" data-variants="rue}]" data-product-category-ids="CA384009-9A01-EA11-A958-000D3A0D463B CFFA0604-8DBC-EA11-A964-000D3A0D463B" data-extra="{&quot;workflow&quot;:&quot;delivery&quot;,&quot;store_name&quot;:&quot;&quot;,&quot;store_id&quot;:&quot;&quot;,&quot;time_select&quot;:&quot;&quot;}" action="/product_preview/bbq-crunch-papas-pequenas-5992" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="TQJ5NJxh5vgHkOezNH/jjm5i9Sr9Tw4tVzwz7u8RI9kB5VFSdhawM7Z6ZDQy6vkDBl1WxHAau5YThLyacnLkJA==">
    <div class="modal-header pb-0 px-4 pt-4 border-0">
      <h4 class="modal-title"> BBQ CRUNCH PAPAS PEQUEÑAS </h4>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-product-name="BBQ CRUNCH PAPAS PEQUEÑAS" data-product-id="5992" data-product-price="10900.0">
        <span>

        </span>
      </button>
    </div>
    <div class="modal-body">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12 col-lg-6">
            <div>
                <img srcset="https://images.getduna.com/5fe6067e-0e11-4869-9118-00w" onerror="this.onerror = null; =webp" alt="BBQ CRUNCH PAPAS PEQUEÑAS" class="img-cart-modal img-fluid mx-auto d-block">
            </div>
          </div>
          <div class="col-12 col-lg-6 offset-lg-6">
            <div id="inside-product-cart-form" data-hook="inside_product_cart_form">
                <div id="product-price" class="mb-2 text-center text-md-left add-to-cart-form-price" data-hook="product_price">
                  <span class="price selling" content="10900.0">
                    $&nbsp;10.900
                  </span>
                  <span content="COP"></span>
                </div>

              <div id="availability-product-modal" class="text-center text-md-left add-to-cart-form-general-availability text-uppercase">
                disponibilidad:
                    <span class="add-to-cart-form-general-availability-value">En Stock</span>

              </div>    


                <div>
                  <div data-hook="product_description">
                    <h3 class="pt-4 font-weight-bold text-uppercase product-details-subtitle">Descripción</h3>
<div id="product-description-short" class="m-0 text-break product-description group-divider" data-hook="description">
  BBQ Crunch + 1 Papa Pequeña
</div>

<div id="product-description-long" class="m-0 text-break product-description d-none" data-hook="description">
  BBQ Crunch + 1 Papa Pequeña
</div>


                  </div>
                  <div data-hook="modifier_groups">
                    

  <div class="modifier-container">
    <h3 class="pt-4 font-weight-bold text-uppercase product-details-subtitle">
      ¿Desea adicionar Bebida?&nbsp;

        <span id="remainder-container" class="remainder-counter">
          (<span id="remainder-options">2</span>/2)
        </span>
    </h3>


      <span data-icon="up" class="choose-one-item">Puedes agregar un máximo de 2 opciones</span>

      <div class="modifier-group-divider modifier-group-select group-select modifier-group-select-3971893" data-min="0" data-max="2">
         
              <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 p-0 px-2 quantity-select-modifier-decrease">-</button>
              <input type="number" name="gaseosa-pet-manzana" id="gaseosa-pet-manzana" value="0" data-last-value="0" data-max="0" data-min="0" data-first="false" class="flex-grow-1 flex-shrink-1 p-0 text-center form-control border-0 quantity-select-modifier-value" aria-label="Cantidad">
              <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 p-0 px-2 quantity-select-modifier-increase action-disabled">+</button>
            </div>
          </div>
          <div class="row d-flex mt-1 check-modifier-values-select" data-id="3971893_14883835">
            <div class="col-9 mr-auto align-self-center">
              <div class="modifier-option-name">
                GASEOSA PET PEPSI LIGHT
              </div>
            </div>
            <div class="col-3 d-flex quantity-select quantity-select-modifier">
              <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 p-0 px-2 quantity-select-modifier-decrease">-</button>
              <input type="number" name="gaseosa-pet-pepsi-light" id="gaseosa-pet-pepsi-light" value="0" data-last-value="0" data-max="0" data-min="0" data-first="false" class="flex-grow-1 flex-shrink-1 p-0 text-center form-control border-0 quantity-select-modifier-value" aria-label="Cantidad">
              <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 p-0 px-2 quantity-select-modifier-increase action-disabled">+</button>
            </div>
          </div>
      </div>
  </div>

                  </div>
                  <div data-hook="related_products">
                      <div class="complement-group-select group-select group-select-related-product " data-min="0" data-max="1" data-modifier-type="related-product" data-related-product-form-type="">


      <h3 class="pt-4 font-weight-bold text-uppercase product-details-subtitle">
        ¿Desea Adicionar Queso?
            <span id="remainder-container" class="remainder-counter">
              (<span id="remainder-options" data-initial-count="0">0</span>/1)
            </span>
      </h3>
      Puedes agregar un máximo de 1 opciones

    <div class="group-divider related-products-group-24 " data-min="0" data-max="1">


            <div class="d-flex modal-relation-product check-modifier-values-select" data-related-product-form-type="quantity" data-price="1500.0" data-id="119" data-min="0" data-max="1">
              <div class="mr-auto align-self-center relation-name">
                <div>
                  <span>QUESO EXTRA</span>
                  <span>
                    (+ <span class="related-product-price" data-currency-symbol="$" data-price="1500.0">$&nbsp;1.500</span>)
                  </span>
                </div>
              </div>
              <div class="d-flex quantity-select quantity-select-related-product mt-1">
                <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-related-product-decrease">-</button>
                <input type="number" name="queso-extra-340" id="queso-extra-340" value="0" data-last-value="0" data-min="0" data-max="0" class="p-0 flex-grow-1 flex-shrink-1 text-center form-control border-0 quantity-select-value quantity-select-group-select-related-product-value" aria-label="Cantidad">
                <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-related-product-increase">+</button>
              </div>
            </div>
    </div>
 
  </div>
  <div class="complement-group-select group-select group-select-related-product " data-min="0" data-max="6" data-modifier-type="related-product" data-related-product-form-type="">


      <h3 class="pt-4 font-weight-bold text-uppercase product-details-subtitle">
        ¿Deseas Adicionar?
            <span id="remainder-container" class="remainder-counter">
              (<span id="remainder-options" data-initial-count="0">0</span>/6)
            </span>
      </h3>
      Puedes agregar un máximo de 6 opciones

    <div class="group-divider related-products-group-15 " data-min="0" data-max="6">


            <div class="d-flex modal-relation-product check-modifier-values-select" data-related-product-form-type="quantity" data-price="5900.0" data-id="135" data-min="0" data-max="6">
              <div class="mr-auto align-self-center relation-name">
                <div>
                  <span>2 STRIPS</span>
                  <span>
                    (+ <span class="related-product-price" data-currency-symbol="$" data-price="5900.0">$&nbsp;5.900</span>)
                  </span>
                </div>
              </div>
              <div class="d-flex quantity-select quantity-select-related-product mt-1">
                <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-related-product-decrease">-</button>
                <input type="number" name="2-strips-4143" id="2-strips-4143" value="0" data-last-value="0" data-min="0" data-max="0" class="p-0 flex-grow-1 flex-shrink-1 text-center form-control border-0 quantity-select-value quantity-select-group-select-related-product-value" aria-label="Cantidad">
                <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-related-product-increase">+</button>
              </div>
            </div>


            <div class="d-flex modal-relation-product check-modifier-values-select" data-related-product-form-type="quantity" data-price="8900.0" data-id="392" data-min="0" data-max="6">
              <div class="mr-auto align-self-center relation-name">
                <div>
                  <span>4 ALITAS</span>
                  <span>
                    (+ <span class="related-product-price" data-currency-symbol="$" data-price="8900.0">$&nbsp;8.900</span>)
                  </span>
                </div>
              </div>
              <div class="d-flex quantity-select quantity-select-related-product mt-1">
                <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-related-product-decrease">-</button>
                <input type="number" name="4-alitas-5192" id="4-alitas-5192" value="0" data-last-value="0" data-min="0" data-max="0" class="p-0 flex-grow-1 flex-shrink-1 text-center form-control border-0 quantity-select-value quantity-select-group-select-related-product-value" aria-label="Cantidad">
                <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-related-product-increase">+</button>
              </div>
            </div>


            <div class="d-flex modal-relation-product check-modifier-values-select" data-related-product-form-type="quantity" data-price="7800.0" data-id="137" data-min="0" data-max="6">
              <div class="mr-auto align-self-center relation-name">
                <div>
                  <span>2 COL PERSONALES</span>
                  <span>
                    (+ <span class="related-product-price" data-currency-symbol="$" data-price="7800.0">$&nbsp;7.800</span>)
                  </span>
                </div>
              </div>
              <div class="d-flex quantity-select quantity-select-related-product mt-1">
                <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-related-product-decrease">-</button>
                <input type="number" name="2-col-personales-4137" id="2-col-personales-4137" value="0" data-last-value="0" data-min="0" data-max="0" class="p-0 flex-grow-1 flex-shrink-1 text-center form-control border-0 quantity-select-value quantity-select-group-select-related-product-value" aria-label="Cantidad">
                <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-related-product-increase">+</button>
              </div>
            </div>


            <div class="d-flex modal-relation-product check-modifier-values-select" data-related-product-form-type="quantity" data-price="5900.0" data-id="128" data-min="0" data-max="6">
              <div class="mr-auto align-self-center relation-name">
                <div>
                  <span>PAPA PEQUENA</span>
                  <span>
                    (+ <span class="related-product-price" data-currency-symbol="$" data-price="5900.0">$&nbsp;5.900</span>)
                  </span>
                </div>
              </div>
              <div class="d-flex quantity-select quantity-select-related-product mt-1">
                <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-related-product-decrease">-</button>
                <input type="number" name="papa-pequena-47" id="papa-pequena-47" value="0" data-last-value="0" data-min="0" data-max="0" class="p-0 flex-grow-1 flex-shrink-1 text-center form-control border-0 quantity-select-value quantity-select-group-select-related-product-value" aria-label="Cantidad">
                <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-related-product-increase">+</button>
              </div>
            </div>
    </div>
 
  </div>
  <div class="complement-group-select group-select group-select-related-product " data-min="0" data-max="5" data-modifier-type="related-product" data-related-product-form-type="">


      <h3 class="pt-4 font-weight-bold text-uppercase product-details-subtitle">
        ¿Deseas Adicionar Postre?
            <span id="remainder-container" class="remainder-counter">
              (<span id="remainder-options" data-initial-count="0">0</span>/5)
            </span>
      </h3>
      Puedes agregar un máximo de 5 opciones

    <div class="group-divider related-products-group-16 " data-min="0" data-max="5">


            <div class="d-flex modal-relation-product check-modifier-values-select" data-related-product-form-type="quantity" data-price="7900.0" data-id="66" data-min="0" data-max="5">
              <div class="mr-auto align-self-center relation-name">
                <div>
                  <span>AVALANCHA OREO</span>
                  <span>
                    (+ <span class="related-product-price" data-currency-symbol="$" data-price="7900.0">$&nbsp;7.900</span>)
                  </span>
                </div>
              </div>
              <div class="d-flex quantity-select quantity-select-related-product mt-1">
                <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-related-product-decrease">-</button>
                <input type="number" name="avalancha-oreo-4184" id="avalancha-oreo-4184" value="0" data-last-value="0" data-min="0" data-max="0" class="p-0 flex-grow-1 flex-shrink-1 text-center form-control border-0 quantity-select-value quantity-select-group-select-related-product-value" aria-label="Cantidad">
                <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-related-product-increase">+</button>
              </div>
            </div>


            <div class="d-flex modal-relation-product check-modifier-values-select" data-related-product-form-type="quantity" data-price="5500.0" data-id="228" data-min="0" data-max="5">
              <div class="mr-auto align-self-center relation-name">
                <div>
                  <span>SUNDAE AREQUIPE</span>
                  <span>
                    (+ <span class="related-product-price" data-currency-symbol="$" data-price="5500.0">$&nbsp;5.500</span>)
                  </span>
                </div>
              </div>
              <div class="d-flex quantity-select quantity-select-related-product mt-1">
                <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-related-product-decrease">-</button>
                <input type="number" name="sundae-arequipe-4486" id="sundae-arequipe-4486" value="0" data-last-value="0" data-min="0" data-max="0" class="p-0 flex-grow-1 flex-shrink-1 text-center form-control border-0 quantity-select-value quantity-select-group-select-related-product-value" aria-label="Cantidad">
                <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-related-product-increase">+</button>
              </div>
            </div>


            <div class="d-flex modal-relation-product check-modifier-values-select" data-related-product-form-type="quantity" data-price="5500.0" data-id="359" data-min="0" data-max="5">
              <div class="mr-auto align-self-center relation-name">
                <div>
                  <span>SUNDAE FRUTOS ROJOS</span>
                  <span>
                    (+ <span class="related-product-price" data-currency-symbol="$" data-price="5500.0">$&nbsp;5.500</span>)
                  </span>
                </div>
              </div>
              <div class="d-flex quantity-select quantity-select-related-product mt-1">
                <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-related-product-decrease">-</button>
                <input type="number" name="sundae-frutos-rojos-5054" id="sundae-frutos-rojos-5054" value="0" data-last-value="0" data-min="0" data-max="0" class="p-0 flex-grow-1 flex-shrink-1 text-center form-control border-0 quantity-select-value quantity-select-group-select-related-product-value" aria-label="Cantidad">
                <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-related-product-increase">+</button>
              </div>
            </div>


            <div class="d-flex modal-relation-product check-modifier-values-select" data-related-product-form-type="quantity" data-price="4900.0" data-id="86" data-min="0" data-max="5">
              <div class="mr-auto align-self-center relation-name">
                <div>
                  <span>FRESAS CON CREMA</span>
                  <span>
                    (+ <span class="related-product-price" data-currency-symbol="$" data-price="4900.0">$&nbsp;4.900</span>)
                  </span>
                </div>
              </div>
              <div class="d-flex quantity-select quantity-select-related-product mt-1">
                <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-related-product-decrease">-</button>
                <input type="number" name="fresas-con-crema-199" id="fresas-con-crema-199" value="0" data-last-value="0" data-min="0" data-max="0" class="p-0 flex-grow-1 flex-shrink-1 text-center form-control border-0 quantity-select-value quantity-select-group-select-related-product-value" aria-label="Cantidad">
                <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-related-product-increase">+</button>
              </div>
            </div>


            <div class="d-flex modal-relation-product check-modifier-values-select" data-related-product-form-type="quantity" data-price="6900.0" data-id="179" data-min="0" data-max="5">
              <div class="mr-auto align-self-center relation-name">
                <div>
                  <span>CHURROS</span>
                  <span>
                    (+ <span class="related-product-price" data-currency-symbol="$" data-price="6900.0">$&nbsp;6.900</span>)
                  </span>
                </div>
              </div>
              <div class="d-flex quantity-select quantity-select-related-product mt-1">
                <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-related-product-decrease">-</button>
                <input type="number" name="churros-3127" id="churros-3127" value="0" data-last-value="0" data-min="0" data-max="0" class="p-0 flex-grow-1 flex-shrink-1 text-center form-control border-0 quantity-select-value quantity-select-group-select-related-product-value" aria-label="Cantidad">
                <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-related-product-increase">+</button>
              </div>
            </div>
    </div>
 
  </div>
  <div class="complement-group-select group-select group-select-related-product " data-min="0" data-max="1" data-modifier-type="related-product" data-related-product-form-type="">


      <h3 class="pt-4 font-weight-bold text-uppercase product-details-subtitle">
        ¿Desea adicionar tocineta?
            <span id="remainder-container" class="remainder-counter">
              (<span id="remainder-options" data-initial-count="0">0</span>/1)
            </span>
      </h3>
      Puedes agregar un máximo de 1 opciones

    <div class="group-divider related-products-group-21 " data-min="0" data-max="1">


            <div class="d-flex modal-relation-product check-modifier-values-select" data-related-product-form-type="quantity" data-price="4900.0" data-id="493" data-min="0" data-max="1">
              <div class="mr-auto align-self-center relation-name">
                <div>
                  <span>AD TOCINETA</span>
                  <span>
                    (+ <span class="related-product-price" data-currency-symbol="$" data-price="4900.0">$&nbsp;4.900</span>)
                  </span>
                </div>
              </div>
              <div class="d-flex quantity-select quantity-select-related-product mt-1">
                <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-related-product-decrease">-</button>
                <input type="number" name="ad-tocineta-5564" id="ad-tocineta-5564" value="0" data-last-value="0" data-min="0" data-max="0" class="p-0 flex-grow-1 flex-shrink-1 text-center form-control border-0 quantity-select-value quantity-select-group-select-related-product-value" aria-label="Cantidad">
                <button name="button" type="button" class="border-0 flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-related-product-increase">+</button>
              </div>
            </div>
    </div>
 
  </div>

                  </div>
                  <div data-hook="additional_information">
                    <label class="pt-4 font-weight-bold text-uppercase product-details-subtitle" for="options_additional_information">Información Adicional</label>
<input type="text" name="options[additional_information]" id="options_additional_information" class="form-control" rows="3">
                  </div>
                  <div data-hook="product_properties">
                    
                  </div>
                  <div data-hook="promotions">
                    

                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
              <input type="hidden" name="variant_id" id="variant_id" value="543">


              <div class="sub-container justify-content-between">
                <div class="row">
                  <div class="col-12 col-lg-3 offset-lg-6 mb-1">
                    <div class="sub-container justify-content-around">
                      <div class="row align-items-center">
                        <div class="col-6 d-lg-none">
                          <p class="m-0 text-center">¿Cuántos deseas agregar?</p>
                        </div>
                        <div class="col-6 col-lg-12">
                          <div class="d-flex quantity-select mx-auto mx-md-0">
  <button name="button" type="button" class="border-right-0 flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-decrease">-</button>
  <input type="number" name="quantity" id="quantity" value="1" min="1" max="2147483647" class="p-0 flex-grow-1 flex-shrink-1 text-center form-control quantity-select-value" aria-label="Cantidad">
  <button name="button" type="button" class="border-left-0  flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-increase">+</button>
</div>

                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-6 d-md-none">
                    <button name="button" type="submit" class="btn text-uppercase font-weight-bold btn-checkout-modal add-to-cart-button btn-modal-footer btn-small-footer" id="add-to-checkout" data-session-id="7d45dc5b12be7f3f47e83981e303490a">
                      Paga tu pedido
</button>                  </div>
                  <div class="col-6 col-md-12 col-lg-3 mb-1">
                    <button name="button" type="submit" class="btn btn-primary text-uppercase font-weight-bold add-to-cart-button btn-modal-footer btn-large-pad" id="add-to-cart-button">
                      <div class="button__text">Añadir al carrito</div>
</button>                  </div>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
</form></div>
</div>
</div>

I am using the following versions:

"@badeball/cypress-cucumber-preprocessor": "^15.1.2",
"@bahmutov/cypress-esbuild-preprocessor": "^2.1.5"
"cypress":"^12.4.1",
"esbuild": "^0.16.5"

It would be very helpful to me if you could help me interact with the elements of this modal since a lot of the testing is with these elements.

The error is an uncaught exception thrown by the app. You can look in the docs here for how to continue on the test. https://docs.cypress.io/api/events/catalog-of-events#cy — jjhelguero, Jan 31 '23 at 16:50
@jjhelguero You are a genious. Consulting the link that you added to the comment, I was able to solve the whole issue and indeed the test continued. Thank you so much. — Julian Novoa, Jan 31 '23 at 23:57

Cypress locate elements within a modal type modal-content

0 Answers0