CoffeeIO

<p class="container">
    Lorem ipsum...
</p>
<p class="container">
    Lorem ipsum...
</p>

var tsb = new TypesetBot('body .container');

Edit example on CodePen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut lectus nec tellus venenatis feugiat sed a sem. Nullam rutrum lacus sed enim vehicula, vel suscipit ex gravida.

<p id="container1">
    Lorem ipsum...
</p>
<p class="container">
    Lorem ipsum...
</p>
<p class="container">
    Lorem ipsum...
</p>

var singleNode = document.getElementById(
    'container1'
);
var multipleNodes = document.querySelectorAll(
    '.container'
);

var tsb1 = new TypesetBot(singleNode);
var tsb2 = new TypesetBot(multipleNodes);

Edit example on CodePen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut lectus nec tellus venenatis feugiat sed a sem. Nullam rutrum lacus sed enim vehicula, vel suscipit ex gravida.

<!-- Hyphenation pattern - english -->
<script src="https://unpkg.com/@fluid-project/hyphenation-patterns@0.2.2-dev.20181115T211247Z.d313a52/dist/browser/en-us.js"></script>
<!-- Hyphenation pattern - danish -->
<script src="https://unpkg.com/@fluid-project/hyphenation-patterns@0.2.2-dev.20181115T211247Z.d313a52/dist/browser/da.js"></script>

<p class="container-en">
    Lorem ipsum...
</p>
<p class="container-da">
    Lorem ipsum...
</p>

var tsb1 = new TypesetBot(
'.container-en',
{ 'hyphenLanguage': 'en-us' }
);
var tsb2 = new TypesetBot(
'.container-da',
{ 'hyphenLanguage': 'da' }
);

Edit example on CodePen

We first started investigating visual regression testing in 2012, starting with Wraith and subsequently forking it to use Selenium webdriver rather than PhantomJS. We’ve also tried Backstop and PhantomCSS, but neither stuck in our workflow. A major stumbling block was deciding when a frontend engineer should run the tests. Ad-hoc during feature development? Before submitting a pull request for a feature? On the develop branch once a feature is merged? Nightly? Maybe a QA automation engineer should be running these instead, as part of a test suite?

Vi begyndte først at undersøge visuel regressionstest i 2012, startede med Wraith og derefter gafle den til at bruge Selenium-webdriver i stedet for PhantomJS. Vi har også prøvet Backstop og PhantomCSS, men ingen af dem sidder fast i vores arbejdsgang. En vigtig stødesten besluttede, hvornår en frontendingeniør skulle køre testene. Ad-hoc under funktionsudvikling? Før du indsender en pull-anmodning om en funktion? På udviklingsgrenen, når en funktion er slået sammen? Overnatning? Måske burde en QA-automatiseringsingeniør køre disse i stedet for som en del af en testsuite?

<p class="container-justified">
    Lorem ipsum...
</p>
<p class="container-ragged">
    Lorem ipsum...
</p>

var tsb1 = new TypesetBot(
'.container-justified',
{ 'alignment': 'justify' }
);
var tsb2 = new TypesetBot(
'.container-ragged',
{ 'alignment': 'left' }
);

Edit example on CodePen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut lectus nec tellus venenatis feugiat sed a sem. Nullam rutrum lacus sed enim vehicula, vel suscipit ex gravida. Duis interdum est non augue bibendum ornare. Nunc accumsan egestas quam. Sed mollis quis urna ac laoreet. Mauris consequat congue nibh ut varius. Quisque ultrices felis et diam mollis convallis. Vivamus convallis felis vitae augue faucibus, vel porttitor diam viverra. Vivamus dictum vulputate aliquet. Ut neque arcu, venenatis eget ullamcorper id, pulvinar sit amet nunc. Morbi cursus euismod lorem rutrum lacinia.

Examples

Initialize with query selector

Initialize with Node or NodeList

Hyphenation language

Text alignment