update examples to have them follow unsafe to chain conventions (#6186)

* update examples to have them follow unsafe to chain conventions

* fix more instances of unsafe-to-chain

* break out trigger

* update another example

* lint

Author: jennifer-shehane

docs/api/commands/blur.mdx

@@ -74,7 +74,8 @@ Pass in an options object to change the default behavior of `.blur`.
 #### Blur the comment input
 
 ```javascript
-cy.get('[name="comment"]').type('Nice Product!').blur()
+cy.get('[name="comment"]').type('Nice Product!')
+cy.get('[name="comment"]').blur()
 ```
 
 ### Options
@@ -140,7 +141,9 @@ events. Your best bet here is to keep Cypress focused when working on a test.
 **_Blur a textarea after typing._**
 
 ```javascript
-cy.get('[name="comment"]').focus().type('Nice Product!').blur()
+cy.get('[name="comment"]').focus()
+cy.get('[name="comment"]').type('Nice Product!')
+cy.get('[name="comment"]').blur()
 ```
 
 The commands above will display in the Command Log as:

docs/api/commands/clear.mdx

@@ -33,7 +33,8 @@ An alias for [`.type('{selectall}{del}')`](/api/commands/type)
 
 ```javascript
 cy.get('[type="text"]').clear() // Clear text input
-cy.get('textarea').type('Hi!').clear() // Clear textarea
+cy.get('textarea').type('Hi!')
+cy.get('textarea').clear() // Clear textarea
 cy.focused().clear() // Clear focused input/textarea
 ```
 
@@ -73,7 +74,8 @@ Pass in an options object to change the default behavior of `.clear()`.
 #### Clear the input and type a new value
 
 ```javascript
-cy.get('textarea').clear().type('Hello, World')
+cy.get('textarea').clear()
+cy.get('textarea').type('Hello, World')
 ```
 
 ## Notes
@@ -117,7 +119,8 @@ Please read the [`.type()`](/api/commands/type) documentation for more details.
 **_Clear the input and type a new value_**
 
 ```javascript
-cy.get('input[name="name"]').clear().type('Jane Lane')
+cy.get('input[name="name"]').clear()
+cy.get('input[name="name"]').type('Jane Lane')
 ```
 
 The commands above will display in the Command Log as:

docs/api/commands/focus.mdx

@@ -65,8 +65,9 @@ cy.get('[type="input"]').focus()
 #### Focus, type, and blur a textarea
 
 ```javascript
-// yields the <textarea> for further chaining
-cy.get('textarea').focus().type('Nice Product!').blur()
+cy.get('textarea').focus()
+cy.get('textarea').type('Nice Product!')
+cy.get('textarea').blur()
 ```
 
 ## Notes

docs/api/commands/pause.mdx

@@ -95,15 +95,14 @@ cy.get('button').should('not.be.disabled')
 **_Pause and step through each `.click()` command_**
 
 ```javascript
-cy.get('#action-canvas')
-  .click(80, 75)
-  .pause()
-  .click(170, 75)
-  .click(80, 165)
-  .click(100, 185)
-  .click(125, 190)
-  .click(150, 185)
-  .click(170, 165)
+cy.get('#action-canvas').click(80, 75)
+cy.pause()
+cy.get('#action-canvas').click(170, 75)
+cy.get('#action-canvas').click(80, 165)
+cy.get('#action-canvas').click(100, 185)
+cy.get('#action-canvas').click(125, 190)
+cy.get('#action-canvas').click(150, 185)
+cy.get('#action-canvas').click(170, 165)
 ```
 
 The commands above will display in the Command Log as:

docs/api/commands/trigger.mdx

@@ -129,10 +129,17 @@ To simulate drag and drop using jQuery UI sortable requires `pageX` and `pageY`
 properties along with `which:1`.
 
 ```javascript
-cy.get('[data-cy=draggable]')
-  .trigger('mousedown', { which: 1, pageX: 600, pageY: 100 })
-  .trigger('mousemove', { which: 1, pageX: 600, pageY: 600 })
-  .trigger('mouseup')
+cy.get('[data-cy=draggable]').trigger('mousedown', {
+  which: 1,
+  pageX: 600,
+  pageY: 100,
+})
+cy.get('[data-cy=draggable]').trigger('mousemove', {
+  which: 1,
+  pageX: 600,
+  pageY: 600,
+})
+cy.get('[data-cy=draggable]').trigger('mouseup')
 ```
 
 #### Drag and Drop

docs/api/commands/viewport.mdx

@@ -305,7 +305,8 @@ cy.viewport(320, 480)
 
 // the navbar should have collapse since our screen is smaller
 cy.get('#navbar').should('not.be.visible')
-cy.get('.navbar-toggle').should('be.visible').click()
+cy.get('.navbar-toggle').should('be.visible')
+cy.get('.navbar-toggle').click()
 cy.get('.nav').find('a').should('be.visible')
 ```
 

docs/api/cypress-api/catalog-of-events.mdx

@@ -344,15 +344,13 @@ it('can modify the window prior to page load on all pages', () => {
   cy
     // window:before:load will be called here
     .visit('/first/page')
-
     .then((win) => {
       // and here
       win.location.href = '/second/page'
     })
 
-    // and here
-    .get('a')
-    .click()
+  // and here
+  cy.get('a').click()
 })
 ```
 

docs/api/cypress-api/custom-commands.mdx

@@ -196,7 +196,7 @@ Cypress.Commands.add('loginViaUi', (user) => {
       cy.visit('/login')
       cy.get('input[name=email]').type(user.email)
       cy.get('input[name=password]').type(user.password)
-      cy.click('button#login')
+      cy.get('button#login').click()
       cy.get('h1').contains(`Welcome back ${user.name}!`)
     },
     {

docs/app/tooling/code-coverage.mdx

@@ -388,10 +388,9 @@ completed.
 ```js
 it('adds and completes todos', () => {
   -{cy.visit('/')::cy.mount(<AddTodo />)}-
-  cy.get('.new-todo')
-    .type('write code{enter}')
-    .type('write tests{enter}')
-    .type('deploy{enter}')
+  cy.get('.new-todo').type('write code{enter}')
+  cy.get('.new-todo').type('write tests{enter}')
+  cy.get('.new-todo').type('deploy{enter}')
 
   cy.get('.todo').should('have.length', 3)
 

docs/ui-coverage/guides/address-coverage-gaps.mdx

@@ -69,7 +69,8 @@ Some gaps occur because elements are hidden or not rendered during tests. Update
 
 ```js
 cy.get('[data-cy="dropdown-toggle"]').click() // Reveal hidden elements
-cy.get('[data-cy="dropdown-item"]').should('be.visible').click()
+cy.get('[data-cy="dropdown-item"]').should('be.visible')
+cy.get('[data-cy="dropdown-item"]').click()
 ```
 
 ### Handle Dynamic Content