Robert DeLuca Robdel12

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:

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 https://percy.io
Running npm run percy (or yarn percy)
??
Get other work done (profit)!

That's about it :p

	<html>
	<head></head>
	<body>
	<div style='font-family: Arial'>
	This is my text with Arial. Is it going to render consistently?
	</div>
	<div style='font-family: Times'>
	This is my text with Times. Is it going to render consistently?
	</div>
	<div style='font-family: serif'>

	// 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 = [].slice.call(document.styleSheets).reduce((prev: 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 (

	describe('My suite', () => {
	// ... lots of tests!
	describe('My nested suite', () => {
	// ... lots of tests!
	it('Percy: takes a snapshot', () => {
	cy.percySnapshot();
	});
	});
	});

	import InputInteractor from 'your-component-library';
	import ButtonInteractor from 'your-component-library';
	import CheckboxInteractor from 'your-component-library';

	@Interactor.extend
	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);

	import { setupAppForTesting } from "@bigtest/react";
	import AppRootComponent from "../../src/index";

	describe("Signup acceptance test", () => {
	let signup = new SignUpInteractor();

	beforeEach(async () => {
	await setupAppForTesting(AppRootComponent);
	});

	describe('Modal test' () => {
	let modal = new ModalInteractor('.modal');

	it('has a disabled submit button with empty data', async () => {
	await mount(()=> <Modal />);

	expect(modal.confirmationButton.isDisabled).toBe(true);
	});
	});

	import Interactor, { scoped } from '@bigtest/interactor';
	import ButtonInteractor from '../button/test/interactor';

	@Interactor.extend
	class ModalInteractor {
	confirmationButton = scoped('[type="submit"]', ButtonInteractor);
	cancelButton = scoped('.cancel', ButtonInteractor);
	}

	import Interactor from '@bigtest/interactor';
	import ModalInteractor from '../modal/test/interactor';

	@ModalInteractor.extend
	class ConfirmationModalInteractor {
	// new things
	}