Show how to get the current page's HTML source (#711)

* add new recipe showing how to get the current page

* add new recipe to circle

* add new recipe to the README file

README.md

@@ -45,6 +45,7 @@ Recipe | Description
 [Page reloads](./examples/testing-dom__page-reloads) | Avoiding `while` loop when dealing with randomness
 [Pagination](./examples/testing-dom__pagination) | Clicking the "Next" link until we reach the last page
 [Clipboard](./examples/testing-dom__clipboard) | Copy and paste text into the clipboard from the test
+[Page source](./examples/testing-dom__page-source) | Get the source of the page under test
 
 ## Logging in recipes
 

circle.yml

@@ -316,6 +316,8 @@ jobs:
     <<: *defaults
   testing-dom__clipboard:
     <<: *defaults
+  testing-dom__page-source:
+    <<: *defaults
   unit-testing__application-code:
     <<: *defaults
   server-communication__bootstrapping-your-app:
@@ -610,6 +612,9 @@ all_jobs: &all_jobs
   - testing-dom__clipboard:
       requires:
         - build
+  - testing-dom__page-source:
+      requires:
+        - build
   - unit-testing__application-code:
       requires:
         - build
@@ -732,6 +737,7 @@ all_jobs: &all_jobs
         - testing-dom__page-reloads
         - testing-dom__pagination
         - testing-dom__clipboard
+        - testing-dom__page-source
         - unit-testing__application-code
         # "meta" jobs
         - test-examples

examples/testing-dom__page-source/README.md

@@ -0,0 +1,6 @@
+# Page source
+> Get the source of the page under test
+
+![Current HTML as text](./images/html-text.gif)
+
+You can get the current document's HTML using `document.documentElement.outerHTML` property. Then you can validate / sanitize the HTML. You can even write it back as text into the current browser to see it, as [spec.js](./cypress/integration/spec.js) shows.

examples/testing-dom__page-source/cypress.json

@@ -0,0 +1,6 @@
+{
+  "fixturesFolder": false,
+  "supportFile": false,
+  "pluginsFile": false,
+  "baseUrl": "https://www.cypress.io/"
+}

examples/testing-dom__page-source/cypress/integration/spec.js

@@ -0,0 +1,17 @@
+/// <reference types="cypress" />
+
+describe('Page source', () => {
+  it('gets the currently loaded document HTML', () => {
+    cy.visit('/')
+    cy.document().its('documentElement.outerHTML')
+    .should('be.a', 'string')
+    // let's show the HTML as text right in the browser
+    // we need to sanitize the "<", ">", "&" characters
+    .invoke('replace', /&/g, '&amp;')
+    .invoke('replace', /</g, '&lt;')
+    .invoke('replace', />/g, '&gt;')
+    .then((sanitized) => {
+      cy.document().invoke('write', sanitized)
+    })
+  })
+})

examples/testing-dom__page-source/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "page-source",
+  "version": "1.0.0",
+  "description": "Get the source of the page under test",
+  "private": true,
+  "scripts": {
+    "cypress:open": "../../node_modules/.bin/cypress open",
+    "cypress:run": "../../node_modules/.bin/cypress run",
+    "start": "echo nothing to start",
+    "test:ci": "npm run cypress:run"
+  }
+}