Fix WooCommerce on WP.com specs (#1055)

Includes fixes for this new toolbar view: Automattic/wp-calypso#22541

To test
`env BROWSERSIZE=desktop ./node_modules/.bin/mocha specs-woocommerce`
`env BROWSERSIZE=mobile ./node_modules/.bin/mocha specs-woocommerce`

lib/components/store-sidebar-component.js

@@ -14,7 +14,7 @@ export default class StoreSidebarComponent extends BaseContainer {
 	// this is necessary on mobile width screens
 	displayComponentIfNecessary() {
 		const driver = this.driver;
-		const mobileLeftArrowSelector = By.css( '.current-section a' );
+		const mobileLeftArrowSelector = By.css( '.action-header button' );
 		driver.findElement( mobileLeftArrowSelector ).isDisplayed().then( ( displayed ) => {
 			if ( displayed === true ) {
 				driverHelper.clickWhenClickable( driver, mobileLeftArrowSelector );

lib/pages/woocommerce/add-edit-product-page.js

@@ -3,6 +3,7 @@ import config from 'config';
 import BaseContainer from '../../base-container';
 
 import * as driverHelper from '../../driver-helper';
+import * as driverManager from '../../driver-manager';
 import * as dataHelper from '../../data-helper';
 
 export default class AddEditProductPage extends BaseContainer {
@@ -65,8 +66,13 @@ export default class AddEditProductPage extends BaseContainer {
 	}
 
 	deleteProduct() {
-		driverHelper.clickWhenClickable( this.driver, by.css( '.action-header__actions button.is-scary' ) );
+		if ( driverManager.currentScreenSize() === 'mobile' ) {
+			// open the menu on mobile screens
+			driverHelper.clickWhenClickable( this.driver, by.css( 'button.split-button__toggle' ) );
+			driverHelper.clickWhenClickable( this.driver, by.css( '.popover__menu-item.is-scary' ) );
+		} else {
+			driverHelper.clickWhenClickable( this.driver, by.css( '.action-header__actions button.is-scary' ) );
+		}
 		driverHelper.clickWhenClickable( this.driver, by.css( '.dialog__action-buttons button[data-e2e-button="accept"]' ) );
 	}
-
 }

specs-woocommerce/wp-woocommerce-spec.js

@@ -45,14 +45,14 @@ test.describe( `Can see WooCommerce Store option in Calypso '${ screenSize }' @p
 		this.navBarComponent.clickMySites();
 	} );
 
-	test.it( 'Can see \'Store (BETA)\' option in main Calypso menu for an AT WooCommerce site set to the US', function() {
+	test.it( 'Can see \'Store\' option in main Calypso menu for an AT WooCommerce site set to the US', function() {
 		this.sideBarComponent = new SidebarComponent( driver );
 		this.sideBarComponent.storeOptionDisplayed().then( ( displayed ) => {
 			assert( displayed, 'The Store menu option is not displayed for the AT WooCommerce site set to the US' );
 		} );
 	} );
 
-	test.it( 'The \'Store (BETA)\' option opens the store dashboard with its own sidebar', function() {
+	test.it( 'The \'Store\' option opens the store dashboard with its own sidebar', function() {
 		this.sideBarComponent = new SidebarComponent( driver );
 		this.sideBarComponent.selectStoreOption();
 		this.storeDashboardPage = new StoreDashboardPage( driver );