Skip to content

Commit bb4ec96

Browse files
stipsanstipsan
authored
chore(ci): setup browserstack to test Safari and other problematic browsers (#238)
* starting initial setup * nightwatch works * trying travis * try another nvm * try again * fix cwd issue * still trying * retry * retry * retry * such a pain in the ass * getting really tired with fighting this crap * and again * test browserstack on circleci * working on it * setup tests * let us test * run more tests * test more devices * drop travis * hum * add edge * support common capabilities * let's debug * see if tests can fail on bs * fix waitForExists error * run more tests * extract test assertion results directly * temp disable other browsers to save trial minutes * test safari instead of IE * lock safari version * test summary * test better nesting * debug json parsing * debug * quick test * guard * test the report * harden * there * keep testing * test again * test * ahem * hm * another test * test * ug * again and again * include ff * test again * agaaaain * 😭 * cleanup * add project name * get info * add badge * remove the bins * fix up * test * test another * extend timeout * run the border test as well * cleanup * better * stop using assert
1 parent 62e060a commit bb4ec96

File tree

7 files changed

+873
-56
lines changed

7 files changed

+873
-56
lines changed

‎.circleci/config.yml

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,40 @@ jobs:
7676
- tests/web-platform/node_modules
7777
key: v5-tests-web-platform-dependencies-{{ .Branch }}-{{ checksum "tests/web-platform/yarn.lock" }}
7878

79+
Browserstack:
80+
docker:
81+
- image: circleci/node:8
82+
steps:
83+
- checkout
84+
- restore-cache: *restore-cache
85+
- *install
86+
- run: yarn build:umd
87+
- restore-cache:
88+
keys:
89+
- v5-tests-web-platform-dependencies-{{ .Branch }}-{{ checksum "tests/web-platform/yarn.lock" }}
90+
# Fallback in case checksum fails
91+
- v5-tests-web-platform-dependencies-{{ .Branch }}-
92+
- run:
93+
command: yarn install --no-progress
94+
working_directory: tests/web-platform
95+
- run:
96+
command: yarn start
97+
background: true
98+
working_directory: tests/web-platform
99+
- run: npx wait-on http://localhost:3000
100+
- run:
101+
command: yarn browserstack
102+
working_directory: tests/web-platform
103+
- store_test_results:
104+
path: tests/web-platform/tests_output
105+
- store_artifacts:
106+
path: tests/web-platform/errorShots
107+
- save-cache:
108+
paths:
109+
- tests/web-platform/node_modules
110+
key: v5-tests-web-platform-dependencies-{{ .Branch }}-{{ checksum "tests/web-platform/yarn.lock" }}
111+
112+
79113
Semantic Release:
80114
docker:
81115
- image: circleci/node:8
@@ -93,11 +127,13 @@ workflows:
93127
- Typecheck
94128
- Build
95129
- Web Platform Tests
130+
- Browserstack
96131
- Semantic Release:
97132
requires:
98133
- Typecheck
99134
- Build
100135
- Web Platform Tests
136+
- Browserstack
101137
filters:
102138
branches:
103139
only:

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ node_modules
55
**/cypress/videos
66
**/junit
77

8+
# Browserstack stuff
9+
**/tests_output
10+
selenium-debug.log
11+
812
# Typescript stuff
913
typings
1014
src/*.js

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
[![size][size-badge]][unpkg-dist]
66
[![module formats: umd, cjs, and es][module-formats-badge]][unpkg-dist]
77
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)
8+
[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?style=flat-square&badge_key=ejZ6OUtTaS9rZFFOYzlkeHlwTzMwSWxpR0FzWFcwOW5TS3ROTmlSdXMrVT0tLVhrVk9La2lCb1o4Y05mcmNXVnAvdkE9PQ==--d17668b8aba5091e4ef3a58927b8209e50b0a788)](https://www.browserstack.com/automate/public-build/ejZ6OUtTaS9rZFFOYzlkeHlwTzMwSWxpR0FzWFcwOW5TS3ROTmlSdXMrVT0tLVhrVk9La2lCb1o4Y05mcmNXVnAvdkE9PQ==--d17668b8aba5091e4ef3a58927b8209e50b0a788)
9+
810
![scroll-into-view-if-needed](https://user-images.githubusercontent.com/81981/39476436-34a4f3ae-4d5c-11e8-9d1c-7fa2fa6288a0.png)
911

1012
This used to be a [ponyfill](https://ponyfill.com) for

‎tests/web-platform/browserstack.conf.js

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
var browserstack = require('browserstack-local')
2+
3+
exports.config = {
4+
user: process.env.BROWSERSTACK_USERNAME,
5+
key: process.env.BROWSERSTACK_ACCESS_KEY,
6+
7+
specs: ['./tests/**'],
8+
9+
maxInstances: 10,
10+
commonCapabilities: {
11+
name: `${process.env.CIRCLE_JOB}-${process.env.CIRCLE_BUILD_NUM}`,
12+
build: process.env.CIRCLE_BRANCH,
13+
'browserstack.local': true,
14+
project: 'scroll-into-view-if-needed',
15+
},
16+
17+
capabilities: [
18+
{ browser: 'Safari', browser_version: '11.1' },
19+
{ browser: 'firefox' },
20+
{ browser: 'IE', browser_version: '11.0' },
21+
{ browser: 'Edge' },
22+
{ os_version: '11.0', device: 'iPhone X', real_mobile: 'true' },
23+
{ os_version: '8.0', device: 'Google Pixel', real_mobile: 'true' },
24+
{ os_version: '7.0', device: 'Samsung Galaxy S8', real_mobile: 'true' },
25+
],
26+
27+
coloredLogs: true,
28+
screenshotPath: './errorShots/',
29+
baseUrl: 'http://localhost:3000',
30+
waitforTimeout: 10000,
31+
connectionRetryTimeout: 90000,
32+
connectionRetryCount: 3,
33+
host: 'hub.browserstack.com',
34+
35+
reporters: ['dot', 'junit'],
36+
reporterOptions: {
37+
junit: {
38+
outputDir: './tests_output',
39+
},
40+
},
41+
framework: 'mocha',
42+
43+
// Code to start browserstack local before start of test
44+
onPrepare: function(config, capabilities) {
45+
console.log('Connecting local')
46+
return new Promise(function(resolve, reject) {
47+
exports.bs_local = new browserstack.Local()
48+
exports.bs_local.start({ key: exports.config.key }, function(error) {
49+
if (error) return reject(error)
50+
console.log('Connected. Now testing...')
51+
52+
resolve()
53+
})
54+
})
55+
},
56+
57+
// Code to stop browserstack local after end of test
58+
onComplete: function(capabilties, specs) {
59+
exports.bs_local.stop(function() {})
60+
},
61+
}
62+
63+
// Code to support common capabilities
64+
// @TODO cleanup this messy snippet with an array.map
65+
exports.config.capabilities.forEach(function(caps) {
66+
for (var i in exports.config.commonCapabilities)
67+
caps[i] = caps[i] || exports.config.commonCapabilities[i]
68+
})

‎tests/web-platform/package.json

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"private": true,
33
"scripts": {
4+
"browserstack": "wdio ./browserstack.conf.js",
45
"start": "serve -i cypress/ -p 3000",
56
"test": "cypress run --browser chrome --reporter junit --reporter-options 'mochaFile=junit/test-results.xml'"
67
},
@@ -9,6 +10,10 @@
910
"serve": "6.5.6"
1011
},
1112
"devDependencies": {
12-
"cypress": "2.1.0"
13+
"browserstack-local": "1.3.1",
14+
"cypress": "2.1.0",
15+
"wdio-junit-reporter": "0.4.3",
16+
"wdio-mocha-framework": "0.5.13",
17+
"webdriverio": "4.12.0"
1318
}
1419
}

‎tests/web-platform/tests/cssom-view.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
const tests = [
2+
'css/cssom-view/scrollintoview.html',
3+
// ignore tests that require newer browser functionality
4+
//'css/cssom-view/scrollIntoView-smooth.html',
5+
//'css/cssom-view/scrollIntoView-shadow.html',
6+
'custom/borders.html',
7+
]
8+
const {
9+
device,
10+
os_version = 'latest',
11+
browser: browserName = device,
12+
browser_version = os_version,
13+
} = browser.desiredCapabilities
14+
15+
describe(`${browserName}: ${browser_version}`, function() {
16+
tests.forEach(testName => {
17+
it(testName, () => {
18+
browser.url(`/${testName}`)
19+
browser.waitForVisible('#results', 30000)
20+
const testResults = JSON.parse(
21+
browser.getHTML('#__testharness__results__', false)
22+
)
23+
testResults.tests.forEach(testResult => {
24+
if (testResult.message) {
25+
throw new Error(testResult.message)
26+
}
27+
})
28+
})
29+
})
30+
})

0 commit comments

Comments
 (0)