Robert DeLuca Robdel12

## 00-problem.md

      
              4 files
            
          
              0 forks
            
          
              1 comment
            
          
              0 stars
            
          
                Robdel12
                / 00-problem.md
            
            
              Last active
              February 15, 2019 23:25
            
              
                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 &gt;.
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:

  
## font-repo.html
<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'>

## how-to-run.md

      
              4 files
            
          
              0 forks
            
          
              0 comments
            
          
              1 star
            
          
                Robdel12
                / how-to-run.md
            
            
              Last active
              April 5, 2019 17:08
            
              
                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 https://percy.io
Running npm run percy (or yarn percy)
??
Get other work done (profit)!

That's about it :p

  
## 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 = [].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 (

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

## example-acceptance-test-interactor.js
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);

## 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);
  });


## 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 />);

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

## modal-interactor-composition.js
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);
}

## custom-interactor-extend-example.js
import Interactor from '@bigtest/interactor';
import ModalInteractor from '../modal/test/interactor';

@ModalInteractor.extend
class ConfirmationModalInteractor {
    // new things
}
	<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
	}