Take screenshots of failed e2e tests (#20313)

This adds screenshots for broken e2e tests. The screenshots will also be uploaded to an Amazon S3 instance from Travis CI so they can be viewed. If run locally, there will be a screenshots directory created where they can be viewed

If there is a failed e2e test you'll see a block under `travis.sh after` in the build log in Travis CI that will give the URLs for the images.

* Adding screenshot capabilities to all tests

* trying screenshots on S3

* try to get a failed test

* finding the right path

* fixing yml

* only taking failed screenshots

* fixing yml

* moving paths to env

* fixing target

* try without artifact target

* fixing test

* setting back temporary changes

* fixing spacing

* unneeded change

* trying different uploader

* Force a failed test

* fixing test again

* fixing  unneeded change

* updating git ignore

.gitignore

@@ -46,3 +46,6 @@ tests/cli/vendor
 # Composer
 /vendor/
 contributors.md
+
+# Screenshots
+/screenshots/

tests/bin/travis.sh

@@ -26,4 +26,7 @@ if [ $1 == 'after' ]; then
 		php ocular.phar code-coverage:upload --format=php-clover coverage.clover
 	fi
 
+	curl -sL https://raw.githubusercontent.com/travis-ci/artifacts/master/install | bash
+	artifacts upload
+
 fi

tests/e2e-tests/cart-page.js

@@ -105,6 +105,13 @@ test.describe( 'Cart page', function() {
 		);
 	} );
 
+	// take screenshot
+	test.afterEach( function() {
+		if ( this.currentTest.state === 'failed' ) {
+			helper.takeScreenshot( manager, this.currentTest );
+		}
+	} );
+
 	// quit browser
 	test.after( () => {
 		manager.quitBrowser();

tests/e2e-tests/checkout-page.js

@@ -150,6 +150,13 @@ test.describe( 'Checkout Page', function() {
 		);
 	} );
 
+	// take screenshot
+	test.afterEach( function() {
+		if ( this.currentTest.state === 'failed' ) {
+			helper.takeScreenshot( manager, this.currentTest );
+		}
+	} );
+
 	// quit browser
 	test.after( () => {
 		manager.quitBrowser();

tests/e2e-tests/my-account-page.js

@@ -115,6 +115,13 @@ test.describe( 'My account page', function() {
 		assert.eventually.ok( myAccount.hasText( 'Account details' ), 'see "Account details" text' );
 	} );
 
+	// take screenshot
+	test.afterEach( function() {
+		if ( this.currentTest.state === 'failed' ) {
+			helper.takeScreenshot( manager, this.currentTest );
+		}
+	} );
+
 	// quit browser
 	test.after( () => {
 		manager.quitBrowser();

tests/e2e-tests/single-product.js

@@ -61,6 +61,13 @@ test.describe( 'Single Product Page', function() {
 		assert.eventually.ok( visitCart().hasItem( 'Hoodie - Green, No' ), '"Hoodie - Green, No" in the cart' );
 	} );
 
+	// take screenshot
+	test.afterEach( function() {
+		if ( this.currentTest.state === 'failed' ) {
+			helper.takeScreenshot( manager, this.currentTest );
+		}
+	} );
+
 	// quit browser
 	test.after( () => {
 		manager.quitBrowser();

tests/e2e-tests/wp-admin/wp-admin-coupon-new.js

@@ -46,6 +46,13 @@ test.describe( 'Add New Coupon Page', function() {
 		assert.eventually.ok( couponPage.hasNotice( 'Coupon updated.' ) );
 	} );
 
+	// take screenshot
+	test.afterEach( function() {
+		if ( this.currentTest.state === 'failed' ) {
+			helper.takeScreenshot( manager, this.currentTest );
+		}
+	} );
+
 	// quit browser
 	test.after( () => {
 		manager.quitBrowser();

tests/e2e-tests/wp-admin/wp-admin-order-new.js

@@ -47,6 +47,13 @@ test.describe( 'Add New Order Page', function() {
 		assert.eventually.ok( orderNotes.hasNote( 'Order status changed from Pending payment to Processing.' ) );
 	} );
 
+	// take screenshot
+	test.afterEach( function() {
+		if ( this.currentTest.state === 'failed' ) {
+			helper.takeScreenshot( manager, this.currentTest );
+		}
+	} );
+
 	// quit browser
 	test.after( () => {
 		manager.quitBrowser();

tests/e2e-tests/wp-admin/wp-admin-product-new.js

@@ -123,6 +123,13 @@ test.describe( 'Add New Product Page', function() {
 		assert.eventually.ok( product.hasNotice( '1 product moved to the Trash.' ) );
 	} );
 
+	// take screenshot
+	test.afterEach( function() {
+		if ( this.currentTest.state === 'failed' ) {
+			helper.takeScreenshot( manager, this.currentTest );
+		}
+	} );
+
 	// quit browser
 	test.after( () => {
 		manager.quitBrowser();

tests/e2e-tests/wp-admin/wp-admin-wc-settings-general.js

@@ -66,6 +66,13 @@ test.describe( 'WooCommerce General Settings', function() {
 		assert.eventually.ok( settings.hasNotice( 'Your settings have been saved.' ) );
 	} );
 
+	// take screenshot
+	test.afterEach( function() {
+		if ( this.currentTest.state === 'failed' ) {
+			helper.takeScreenshot( manager, this.currentTest );
+		}
+	} );
+
 	// quit browser
 	test.after( () => {
 		manager.quitBrowser();

tests/e2e-tests/wp-admin/wp-admin-wc-settings-products-downloadable.js

@@ -51,6 +51,13 @@ test.describe( 'WooCommerce Products > Downloadable Products Settings', function
 		assert.eventually.ok( settings.hasNotice( 'Your settings have been saved.' ) );
 	} );
 
+	// take screenshot
+	test.afterEach( function() {
+		if ( this.currentTest.state === 'failed' ) {
+			helper.takeScreenshot( manager, this.currentTest );
+		}
+	} );
+
 	// quit browser
 	test.after( () => {
 		manager.quitBrowser();

tests/e2e-tests/wp-admin/wp-admin-wc-settings-tax.js

@@ -95,6 +95,13 @@ test.describe( 'WooCommerce Tax Settings', function() {
 		assert.eventually.ifError( settings.hasSubTab( 'Fancy rates' ) );
 	} );
 
+	// take screenshot
+	test.afterEach( function() {
+		if ( this.currentTest.state === 'failed' ) {
+			helper.takeScreenshot( manager, this.currentTest );
+		}
+	} );
+
 	// quit browser
 	test.after( () => {
 		manager.quitBrowser();