npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@typeform/foreyes

v1.14.1

Published

Visually compare urls (or react components) across browsers

Downloads

18

Readme

Foreyes

📺 Compare how your webpage looks in different browsers! 📺

Build Status Statements Functions Lines Branches

We want to ensure our design is consistent across our supported browsers. Sadly, this is typically done in a manual fashion. Foreyes aims to fix that problem.

Here's how it works: Foreyes screenshoots a webpage in a baseline browser (the one where we usually develop), and then compares it with the screenshots of other browsers. Then announce the pixel differences, if any!

The currently supported browsers are Chrome (as the baseline), Firefox, and IE11 (through Browserstack).

Getting Started

Prerequisites

Foreyes is a CLI tool that uses node.js and yarn; so ensure they are installed. And because Foreyes uses Selenium, have the latest Java installed, too.

Additionally, at the moment IE11 is run on Browserstack. Be sure to export these ENV vars if you wish to use it.

BROWSERSTACK_USERNAME
BROWSERSTACK_KEY

Installing

Use yarn to add the package:

yarn add @typeform/foreyes

Foreyes has the following command to easily create the necessary config files (under foreyesConfig):

yarn foreyes setup

Running

Foreyes can visually compare URLs directly. Add URLs to the list at foreyesConfig/fixturesUrls.json. Then use yarn foreyes test-urls to run them.

There are 3 byproducts of a test execution:

  1. Information on the command line, including the percentage of difference between browsers.
  2. Screenshots (original, and difference) under the screenshots folder.
  3. A pretty HTML report in foreyesConfig/report/index.html

These tools can be very useful in diagnosing why exactly the execution has failed.

Other uses

There are other ways to use Foreyes.

Testing a design system

Originally, Foreyes was designed to work with Design Systems! It has since become a more flexible tool; however that functionality is still there, maintained.

So, if you're interested in visually comparing specific mounted components, check out this cool guide!

CI (Travis)

Travis has to work with Java (for Selenium), and have Chrome and Firefox (and their drivers) available. Foreyes will download most of these things as dependencies, but not all of them.

Therefore, add in .travis.yml:

addons:
  chrome: stable

before_install:
  - export MOZ_HEADLESS=1

script:
  - yarn foreyes test-urls

Contributing

Head over to CONTRIBUTING.md for more information

Authors

Refer to one of the authors for help and issues.

  • Daniel Giralt Len - Coordinator and Developer
  • Jordi Pons Llauradó - Developer
  • Toni Feliu - Developer
  • Pau Boix - Developer

License

This code's license is Apache-2.0