build: run browserstack on circleci (#13749)

scripts/browserstack/start-tunnel.sh

@@ -2,49 +2,48 @@
 
 set -e -o pipefail
 
-# Workaround for Travis CI cookbook https://github.com/travis-ci/travis-ci/issues/4862,
-# where $PATH will be extended with relative paths to the NPM binaries.
-PATH=`echo ${PATH} | sed -e 's/:\.\/node_modules\/\.bin//'`
+tunnelFileName="BrowserStackLocal-linux-x64.zip"
+tunnelUrl="https://www.browserstack.com/browserstack-local/${tunnelFileName}"
 
-TUNNEL_FILE="BrowserStackLocal-linux-x64.zip"
-TUNNEL_URL="https://www.browserstack.com/browserstack-local/${TUNNEL_FILE}"
-TUNNEL_DIR="/tmp/browserstack-tunnel"
-TUNNEL_LOG="${LOGS_DIR}/browserstack-tunnel.log"
-
-BROWSER_STACK_ACCESS_KEY=`echo ${BROWSER_STACK_ACCESS_KEY} | rev`
+tunnelTmpDir="/tmp/material-browserstack"
+tunnelLogFile="${tunnelTmpDir}/browserstack-local.log"
+tunnelReadyFile="${tunnelTmpDir}/readyfile"
+tunnelErrorFile="${tunnelTmpDir}/errorfile"
 
 # Cleanup and create the folder structure for the tunnel connector.
-rm -rf ${TUNNEL_DIR} ${BROWSER_PROVIDER_READY_FILE}
-mkdir -p ${TUNNEL_DIR}
-touch ${TUNNEL_LOG}
+rm -rf ${tunnelTmpDir} ${tunnelReadyFile} ${tunnelErrorFile}
+mkdir -p ${tunnelTmpDir}
+touch ${tunnelLogFile}
 
-cd ${TUNNEL_DIR}
+# Go into temporary tunnel directory.
+cd ${tunnelTmpDir}
 
 # Download the browserstack local binaries.
-curl ${TUNNEL_URL} -o ${TUNNEL_FILE} 2> /dev/null 1> /dev/null
+curl ${tunnelUrl} -o ${tunnelFileName} 2> /dev/null 1> /dev/null
 
 # Extract the browserstack local binaries from the tarball.
 mkdir -p browserstack-tunnel
-unzip -q ${TUNNEL_FILE} -d browserstack-tunnel
+unzip -q ${tunnelFileName} -d browserstack-tunnel
 
-# Cleanup the download directory.
-rm ${TUNNEL_FILE}
+# Cleanup the downloaded zip archive.
+rm ${tunnelFileName}
 
 ARGS=""
 
-# Set tunnel-id only on Travis, to make local testing easier.
-if [ ! -z "${TRAVIS_JOB_ID}" ]; then
-  ARGS="${ARGS} --local-identifier ${TRAVIS_JOB_ID}"
+if [ ! -z "${CIRCLE_BUILD_NUM}" ]; then
+  ARGS="${ARGS} --local-identifier ${CIRCLE_BUILD_NUM}"
 fi
 
-echo "Starting Browserstack Local in the background, logging into: ${TUNNEL_LOG}"
+echo "Starting Browserstack Local in the background, logging into: ${tunnelLogFile}"
 
 # Extension to the BrowserStackLocal binaries, because those can't create a readyfile.
 function create_ready_file {
+  # Process ID for the BrowserStack local asynchronous instance.
+  tunnelProcessPid=${1}
 
   # To be able to exit the tail properly we need to have a sub shell spawned, which is
   # used to track the state of tail.
-  { sleep 120; touch ${BROWSER_PROVIDER_ERROR_FILE}; } &
+  { sleep 120; touch ${tunnelErrorFile}; } &
 
   TIMER_PID=${!}
 
@@ -54,16 +53,18 @@ function create_ready_file {
 
   # When the tail recognizes the `Ctrl-C` log message the BrowserStack Tunnel is up.
   {
-    tail -n0 -f ${TUNNEL_LOG} --pid ${TIMER_PID} | { sed '/Ctrl/q' && kill -9 ${TIMER_PID}; };
+    tail -n0 -f ${tunnelLogFile} --pid ${TIMER_PID} | { sed '/Ctrl/q' && kill -9 ${TIMER_PID}; };
   } &> /dev/null
 
   echo
   echo "BrowserStack Tunnel ready"
 
-  touch ${BROWSER_PROVIDER_READY_FILE}
+  # Create the readyfile and write the PID for BrowserStack Local into it.
+  echo ${tunnelProcessPid} > ${tunnelReadyFile}
 }
 
-browserstack-tunnel/BrowserStackLocal -k ${BROWSER_STACK_ACCESS_KEY} ${ARGS} 2>&1 >> ${TUNNEL_LOG} &
+browserstack-tunnel/BrowserStackLocal -k ${BROWSER_STACK_ACCESS_KEY} ${ARGS} 2>&1 >> \
+  ${tunnelLogFile} &
 
 # Wait for the tunnel to be ready and create the readyfile with the Browserstack PID
-create_ready_file &
+create_ready_file ${!} &

scripts/browserstack/stop-tunnel.sh

@@ -2,15 +2,27 @@
 
 set -e -o pipefail
 
+tunnelTmpDir="/tmp/material-browserstack"
+tunnelReadyFile="${tunnelTmpDir}/readyfile"
 
-echo "Shutting down Browserstack tunnel"
+if [[ ! -f ${tunnelReadyFile} ]]; then
+  echo "BrowserStack tunnel has not been started. Cannot stop tunnel.."
+  exit 1
+fi
 
-killall BrowserStackLocal
+echo "Shutting down Browserstack tunnel.."
 
-while [[ -n `ps -ef | grep "BrowserStackLocal" | grep -v "grep"` ]]; do
+# The process id for the BrowserStack local instance is stored inside of the readyfile.
+tunnelProcessId=$(cat ${tunnelReadyFile})
+
+# Kill the process by using the PID that has been read from the readyfile. Note that
+# we cannot use killall because CircleCI base container images don't have it installed.
+kill ${tunnelProcessId}
+
+while (ps -p ${tunnelProcessId} &> /dev/null); do
   printf "."
   sleep .5
 done
 
 echo ""
-echo "Browserstack tunnel has been shut down"
+echo "Browserstack tunnel has been shut down"

scripts/browserstack/wait-tunnel.sh

@@ -1,13 +1,17 @@
 #!/bin/bash
 
-TUNNEL_LOG="$LOGS_DIR/browserstack-tunnel.log"
+tunnelTmpDir="/tmp/material-browserstack"
+tunnelLogFile="${tunnelTmpDir}/browserstack-local.log"
+tunnelReadyFile="${tunnelTmpDir}/readyfile"
+tunnelErrorFile="${tunnelTmpDir}/errorfile"
+
 WAIT_DELAY=30
 
 # Method that prints the logfile output of the browserstack tunnel.
 printLog() {
-  echo "Logfile output of Browserstack tunnel (${TUNNEL_LOG}):"
+  echo "Logfile output of Browserstack tunnel (${tunnelLogFile}):"
   echo ""
-  cat ${TUNNEL_LOG}
+  cat ${tunnelLogFile}
 }
 
 # Wait for Connect to be ready before exiting
@@ -15,14 +19,14 @@ printLog() {
 let "counter=0"
 
 # Exit the process if there are errors reported. Print the tunnel log to the console.
-if [ -f $BROWSER_PROVIDER_ERROR_FILE ]; then
+if [ -f ${tunnelErrorFile} ]; then
   echo
   echo "An error occurred while starting the tunnel. See error:"
   printLog
   exit 5
 fi
 
-while [ ! -f $BROWSER_PROVIDER_READY_FILE ]; do
+while [ ! -f ${tunnelReadyFile} ]; do
   let "counter++"
 
   # Counter needs to be multiplied by two because the while loop only sleeps a half second.