feat: add attribute with a dot example

docs/commands/assertions.md

@@ -603,6 +603,32 @@ cy.get('[data-cy=subject-example]') // jQuery element
 
 <!-- fiddle-end -->
 
+#### Escape special characters
+
+Sometimes an attribute can have a special character like `.` or `:` in it. If you are just checking the attribute name, you do not need to escape them.
+
+<!-- fiddle Implicit Assertions / .should() - have.attr with a dot -->
+
+```html
+<div id="escape-attribute" attr.aria-label="Attribute example">
+  Example
+</div>
+```
+
+```js
+// confirm the element has the attribute
+cy.get('#escape-attribute').should('have.attr', 'attr.aria-label')
+// confirm the element has the attribute and that attribute
+// has the specific value
+cy.get('#escape-attribute').should(
+  'have.attr',
+  'attr.aria-label',
+  'Attribute example',
+)
+```
+
+<!-- fiddle-end -->
+
 #### `have.attr` assertion chain
 
 <!-- fiddle Implicit Assertions / .should() - have.attr matching part of the string -->

docs/commands/querying.md

@@ -180,6 +180,28 @@ cy.get('#specific-href a[href="index.html"]')
 
 <!-- fiddle-end -->
 
+### Escape the attribute
+
+Sometimes an attribute can have a special character like `.` or `:` in it. Please escape the attribute using the `\\` character.
+
+<!-- fiddle cy.get / escape special characters in attribute -->
+
+```html
+<div id="escape-attribute" attr.aria-label="Attribute example">
+  Example
+</div>
+```
+
+```js
+cy.get('[attr\\.aria-label="Attribute example"]')
+  .should('have.id', 'escape-attribute')
+  // ignore the newline characters by using the assertion "include.text"
+  // rather than the assertion "have.text"
+  .and('include.text', 'Example')
+```
+
+<!-- fiddle-end -->
+
 ### Attribute prefix
 
 Let's get the element with ID starting with "local-example" prefix