The examples use @applitools/eyes-selenium
but are relevant also for webdriver.io and protractor SDK's.
import {Thing, ThingType, Other} from './things' | |
function foo() : typeof ThingType { | |
const thing = new Thing('bla', new Other()) | |
return thing | |
} |
'use strict'; | |
const {Eyes, Target, TestResultsFormatter} = require('@applitools/eyes-selenium'); | |
const {Builder, By, Key} = require('selenium-webdriver'); | |
(async () => { | |
const eyes = new Eyes(); | |
const driver = new Builder().forBrowser('chrome').build(); | |
try { | |
await driver.get('http://todomvc-app-for-testing.surge.sh/'); |
const toMB = require('./toMB') | |
console.log(`[0]\t${takeMem()}`) | |
const MB = 1024 * 1024; | |
const MAX = MB * 200; | |
let s = '', i = -1; | |
const buff = Buffer.alloc(MAX); | |
const start = Date.now(); |
Both chromedriver and geckodriver have strange behavior:
When executing javascript via the driver, objects in the return value that have the property nodeType
with values 1
or 9
(Element or Document types) are converted to Element representations.
Another way to show this, is by starting the driver, then creating a session by POST'ing to http://localhost:9515/session
and then executing javascript by POST'ing to http://localhost:9515/session/<session_id>/execute/sync
. The response is something like:
{
"ELEMENT": "0.6880568807801719-1"
}
cd my-app | |
npm install --save-dev @applitools/eyes.storybook | |
npx eyes-storybook |
import React, { Component } from 'react'; | |
class ScrollToBottom extends Component { | |
componentDidUpdate() { | |
this.el.scrollTop = this.el.scrollHeight; | |
} | |
render() { | |
const child = React.Children.only(this.props.children); | |
return React.cloneElement(child, { ref: (el) => { this.el = el; } }); |
You got an SVG path like M20,20 30,20 30,30 20,30 Z
, which is a 10x10 square whose top left corner is positioned at 20,20
.
You would like that square's top left corner to be positioned at 0,0
.
See here: https://developers.google.com/maps/documentation/javascript/symbols#add_to_marker
Google maps API allows to specify a path as a marker. This allows to do cool stuff like theming of the marker, which is the reason I needed to do this whole thing.
The challenge here is that the exact location of the marker is mapped to the SVG path's 0,0
. So if you have an SVG of a custom pin, like the one attached to this gist, you have to make sure that the pointy part of the pin is located at 0,0
.
<html> | |
<body> | |
<script> | |
var colors = {"Red":{"50":"#ffebee","100":"#ffcdd2","200":"#ef9a9a","300":"#e57373","400":"#ef5350","500":"#f44336","600":"#e53935","700":"#d32f2f","800":"#c62828","900":"#b71c1c","A100":"#ff8a80","A200":"#ff5252","A400":"#ff1744","A700":"#d50000"},"Pink":{"50":"#fce4ec","100":"#f8bbd0","200":"#f48fb1","300":"#f06292","400":"#ec407a","500":"#e91e63","600":"#d81b60","700":"#c2185b","800":"#ad1457","900":"#880e4f","A100":"#ff80ab","A200":"#ff4081","A400":"#f50057","A700":"#c51162"},"Purple":{"50":"#f3e5f5","100":"#e1bee7","200":"#ce93d8","300":"#ba68c8","400":"#ab47bc","500":"#9c27b0","600":"#8e24aa","700":"#7b1fa2","800":"#6a1b9a","900":"#4a148c","A100":"#ea80fc","A200":"#e040fb","A400":"#d500f9","A700":"#aa00ff"},"Deep Purple":{"50":"#ede7f6","100":"#d1c4e9","200":"#b39ddb","300":"#9575cd","400":"#7e57c2","500":"#673ab7","600":"#5e35b1","700":"#512da8","800":"#4527a0","900":"#311b92","A100":"#b388ff","A200":"#7c4dff","A400":"#651fff","A700":"#6200ea"},"Indigo":{"50":"#e8eaf6 |
Creating async tests with jasmine is quite intuitive.
If you've read the documentation, then you are aware of the [waitsFor
][2] and [runs
][2] helpers in Jasmine.
I had more than one async action in my test, so it required an inspection on my side to verify that Jasmine would run the test in the same way I had expected.
If you specify a series of waitsFor
or waits
and runs
callbacks, then Jasmine will start the countdown for each waitsFor
at the appropriate time (in this gist - after the previous runs
callback was completed).