feat: add testcase: 02

.github/workflows/cypress-test.yml

@@ -51,7 +51,7 @@ jobs:
       fail-fast: false
       matrix:
         # run copies of the current job in parallel
-        containers: [1, 2, 3, 4, 5]
+        containers: [1, 2, 3]
     steps:
       - name: Checkout
         uses: actions/checkout@v4

cypress/e2e/advanced/actions.cy.ts

@@ -123,6 +123,96 @@ describe('Actions', () => {
   })
 
   it('.uncheck() - uncheck a checkbox element', () => {
+    cy.get('.action-check [type="checkbox"]').not('[disabled]').uncheck();
+    cy.get('.action-check [type="checkbox"]').not('[disabled]').should('not.be.checked')
+
+    // .uncheck() accepts a value argument
+    cy.get('.action-check [type="checkbox"]').check('checkbox1');
+    cy.get('.action-check [type="checkbox"]').uncheck('checkbox1');
+
+    // .uncheck() accepts an array of values
+    cy.get('.action-check [type="checkbox"]')
+      .check(['checkbox1', 'checkbox3'])
+    cy.get('.action-check [type="checkbox"]')
+      .uncheck(['checkbox1', 'checkbox3'])
+
+    // Ignore error checking prior to unchecking
+    cy.get('.action-check [disabled]').uncheck({ force: true })
+    cy.get('.action-check [disabled]').should('not.be.checked')
+  })
+
+  it('.select() - select an option in a <select> element', () => {
+    cy.get('.action-select').should('have.value', '--Select a fruit--')
+    cy.get('.action-select').select('apples')
+    cy.get('.action-select').should('have.value', 'fr-apples')
+
+    // Select option(s) with matching value
+    cy.get('.action-select').select('fr-bananas')
+    cy.get('.action-select')
+    // can attach an assertion right away to the element
+      .should('have.value', 'fr-bananas')
+  })
+
+  it('.scrollIntoView() - scroll an element into view', () => {
+    cy.get('#scroll-horizontal button')
+      .should('not.be.visible')
 
+    // scroll the button into view, as if the user had scrolled
+    cy.get('#scroll-horizontal button').scrollIntoView()
+    cy.get('#scroll-horizontal button')
+      .should('be.visible')
+  })
+
+  it('cy.scrollTo() - scroll the window or element to a position', () => {
+    // You can scroll to 9 specific positions of an element:
+    //  -----------------------------------
+    // | topLeft        top       topRight |
+    // |                                   |
+    // |                                   |
+    // |                                   |
+    // | left          center        right |
+    // |                                   |
+    // |                                   |
+    // |                                   |
+    // | bottomLeft   bottom   bottomRight |
+    //  -----------------------------------
+
+    // if you chain .scrollTo() off of cy, we will
+    // scroll the entire window
+    cy.scrollTo('bottom')
+
+    cy.get('#scrollable-horizontal').scrollTo('right')
+
+    // or you can scroll to a specific coordinate:
+    // (x axis, y axis) in pixels
+    cy.get('#scrollable-vertical').scrollTo(250, 250)
+
+    // or you can scroll to a specific percentage
+    // of the (width, height) of the element
+    cy.get('#scrollable-both').scrollTo('75%', '25%')
+
+    // control the easing of the scroll (default is 'swing')
+    cy.get('#scrollable-vertical').scrollTo('center', { easing: 'linear' })
+
+    // control the duration of the scroll (in ms)
+    cy.get('#scrollable-both').scrollTo('center', { duration: 2000});
+  })
+
+  it('.trigger() - trigger an event on a DOM element', () => {
+    // https://on.cypress.io/trigger
+
+    // To interact with a range input (slider)
+    // we need to set its value & trigger the
+    // event to signal it changed
+
+    // Here, we invoke jQuery's val() method to set
+    // the value and trigger the 'change' event
+    cy.get('.trigger-input-range')
+      .invoke('val', 25)
+    cy.get('.trigger-input-range')
+      .trigger('change')
+    cy.get('.trigger-input-range')
+      .get('input[type=range]').siblings('p')
+      .should('have.text', '25')
   })
 })