Skip to content

Instantly share code, notes, and snippets.

Racing through work

Robert DeLuca Robdel12

Racing through work
View GitHub Profile
Robdel12 /
Last active Feb 15, 2019
The smallest needed reproduction for UTF-8 / CSS child selector encoding issues with Chrome webdriver

What is this?

When using the Chrome webdriver with inline styles that have a child selector (>), calling browser.page_source improperly encodes the child selector to >.

This works properly in Firefox and Safari, but not Chrome.

This example was served with a SimpleHTTPServer in Python (python -m SimpleHTTPServer). I even went as far as to try and serve these files with UTF-8 encoding:

View font-repo.html
<div style='font-family: Arial'>
This is my text with Arial. Is it going to render consistently?
<div style='font-family: Times'>
This is my text with Times. Is it going to render consistently?
<div style='font-family: serif'>
Robdel12 /
Last active Apr 5, 2019
A small example of Percy & puppeteer

The quickest test suite to setup

Once you fill in the URLs you want to snapshot, you can run the visual tests by:

  • Setting your PERCY_TOKEN to a project in
  • Running npm run percy (or yarn percy)
  • ??
  • Get other work done (profit)!

That's about it :p

View serialize-cssom.ts
// snagged from MDN
// The goal is to take all the CSS created in the CSS Object Model (CSSOM)
// and inject it into the DOM so Percy can render it safely in our browsers
let cssOmStyles = [] String, styleSheet: CSSStyleSheet) => {
// Make sure it has a rulesheet, does NOT have a href (no external stylesheets), and isn't already in the DOM.
let hasHref = styleSheet.href;
let hasStyleInDom = styleSheet.ownerNode.innerText.length > 0;
if (styleSheet.cssRules && !hasHref && !hasStyleInDom) {
return (
View example-test.js
describe('My suite', () => {
// ... lots of tests!
describe('My nested suite', () => {
// ... lots of tests!
it('Percy: takes a snapshot', () => {
View example-acceptance-test-interactor.js
import InputInteractor from 'your-component-library';
import ButtonInteractor from 'your-component-library';
import CheckboxInteractor from 'your-component-library';
class SignUpInteractor {
firstName = scoped("[data-test-first-name]", InputInteractor);
lastName = scoped("[data-test-last-name]", InputInteractor);
subscribeCheckbox = scoped("[data-test-email-checkbox]", CheckboxInteractor);
submitBtn = scoped('[type="submit"]', ButtonInteractor);
View example-acceptance-test.js
import { setupAppForTesting } from "@bigtest/react";
import AppRootComponent from "../../src/index";
describe("Signup acceptance test", () => {
let signup = new SignUpInteractor();
beforeEach(async () => {
await setupAppForTesting(AppRootComponent);
View modal-jest-test-example.js
describe('Modal test' () => {
let modal = new ModalInteractor('.modal');
it('has a disabled submit button with empty data', async () => {
await mount(()=> <Modal />);
View modal-interactor-composition.js
import Interactor, { scoped } from '@bigtest/interactor';
import ButtonInteractor from '../button/test/interactor';
class ModalInteractor {
confirmationButton = scoped('[type="submit"]', ButtonInteractor);
cancelButton = scoped('.cancel', ButtonInteractor);
View custom-interactor-extend-example.js
import Interactor from '@bigtest/interactor';
import ModalInteractor from '../modal/test/interactor';
class ConfirmationModalInteractor {
// new things