mirror of
https://github.com/Smaug123/KaTeX
synced 2025-10-05 19:28:39 +00:00
Make our own screenshotting script instead of using huxley
Summary: Create our own screenshotting script which takes screenshots. This improves over huxley for a couple reasons: - It makes the screenshots the correct size (for some reason, huxley struggles with this). - Its configuration matches more with what we want (we don't need multiple screenshots or interaction, we just want a single static shot) - It runs faster I also changed the docs to reflect this change. Test Plan: - Make sure all of the tests that were in the Huxleyfile are now in ss_data.json - Run the screenshotter docker - Make sure all of the images look reasonable and don't change (except sometimes the Lap test, which has some strange pixel-positioning differences...) Reviewers: kevinb Reviewed By: kevinb Differential Revision: https://phabricator.khanacademy.org/D16731
This commit is contained in:
Emily Eisenberg
@@ -1,13 +0,0 @@
|
||||
FROM ubuntu:14.04
|
||||
MAINTAINER xymostech <xymostech@gmail.com>
|
||||
RUN apt-get -qq update
|
||||
RUN apt-get -qqy install nodejs=0.10.25~dfsg2-2ubuntu1 default-jre=2:1.7-51 firefox=28.0+build2-0ubuntu2 xvfb=2:1.15.1-0ubuntu2 wget=1.15-1ubuntu1 || true
|
||||
RUN wget http://selenium-release.storage.googleapis.com/2.42/selenium-server-standalone-2.42.2.jar
|
||||
RUN ln -s /usr/bin/nodejs /usr/bin/node
|
||||
ENV DISPLAY :1
|
||||
CMD /bin/bash ~/run.sh
|
||||
RUN echo "java -jar /selenium-server-standalone-2.42.2.jar > /dev/null &" >> ~/run.sh
|
||||
RUN echo "Xvfb :1 2> /dev/null &" >> ~/run.sh
|
||||
RUN echo "make -C /KaTeX serve > /dev/null &" >> ~/run.sh
|
||||
RUN echo "sleep 2" >> ~/run.sh
|
||||
RUN echo "/KaTeX/node_modules/.bin/hux --write /KaTeX/test/huxley/" >> ~/run.sh
|
||||
@@ -1,29 +0,0 @@
|
||||
### How to generate huxley images
|
||||
---------------------------------
|
||||
|
||||
Now you too can generate huxley images from your own computer, and (hopefully)
|
||||
have them look mostly the same as the current ones! To start, make a docker
|
||||
image from the included Dockerfile using a command like
|
||||
|
||||
sudo docker build --tag=huxley .
|
||||
|
||||
from within this directory (note you need to have docker installed and running
|
||||
for this to work). This will build a docker image with the huxley tag,
|
||||
which you can then use to run dockers based on them.
|
||||
|
||||
This huxleyfile is set up such that it will run everything and generate all the
|
||||
huxley images when the image is run, so no interactive input is required. All
|
||||
that you need to do is mount the KaTeX directory you want to test into the
|
||||
`/KaTeX` directory in the docker, and run the huxley docker, like so:
|
||||
|
||||
sudo docker run --volume=/your/KaTeX/:/KaTeX huxley
|
||||
|
||||
The `--volume=/your/KaTeX:/KaTeX` switch mounts your KaTeX directory into the
|
||||
docker. Note this is a read-write mounting, so the new huxley images will be
|
||||
directly placed into your KaTeX directory.
|
||||
|
||||
Since this docker is very self-contained, there should be no need to do
|
||||
interactive management of the docker, but if you feel the need, you can read the
|
||||
General Docker Help section of the MathJaxFonts docker readme.
|
||||
|
||||
That's it!
|
||||
14
dockers/Screenshotter/Dockerfile
Normal file
14
dockers/Screenshotter/Dockerfile
Normal file
@@ -0,0 +1,14 @@
|
||||
FROM ubuntu:14.04
|
||||
MAINTAINER xymostech <xymostech@gmail.com>
|
||||
RUN apt-get -qq update
|
||||
RUN apt-get -qqy install default-jre=2:1.7-51 firefox=28.0+build2-0ubuntu2 xvfb=2:1.15.1-0ubuntu2 wget=1.15-1ubuntu1 python=2.7.5-5ubuntu3 python-pip=1.5.4-1 nodejs=0.10.25~dfsg2-2ubuntu1 || true
|
||||
RUN wget http://selenium-release.storage.googleapis.com/2.43/selenium-server-standalone-2.43.0.jar
|
||||
RUN ln -s /usr/bin/nodejs /usr/bin/node
|
||||
RUN pip install selenium pypng
|
||||
ENV DISPLAY :1
|
||||
CMD /bin/bash ~/run.sh
|
||||
RUN echo "java -jar /selenium-server-standalone-2.43.0.jar > /dev/null &" >> ~/run.sh
|
||||
RUN echo "Xvfb :1 2> /dev/null &" >> ~/run.sh
|
||||
RUN echo "make -C /KaTeX serve > /dev/null &" >> ~/run.sh
|
||||
RUN echo "sleep 2" >> ~/run.sh
|
||||
RUN echo "/KaTeX/dockers/Screenshotter/screenshotter.py /KaTeX/test/screenshotter/ss_data.json" >> ~/run.sh
|
||||
29
dockers/Screenshotter/README.md
Normal file
29
dockers/Screenshotter/README.md
Normal file
@@ -0,0 +1,29 @@
|
||||
### How to generate screenshotter images
|
||||
----------------------------------------
|
||||
|
||||
Now you too can generate screenshots from your own computer, and (hopefully)
|
||||
have them look mostly the same as the current ones! To start, make a docker
|
||||
image from the included Dockerfile using a command like
|
||||
|
||||
docker build --tag=ss .
|
||||
|
||||
from within this directory (note you need to have docker installed and running
|
||||
for this to work). This will build a docker image with the `ss` tag, which you
|
||||
can then use to run dockers based on it.
|
||||
|
||||
This Dockerfile is set up such that it will run everything and generate all the
|
||||
screenshots when the docker is run, so no interactive input is required. All
|
||||
that you need to do is mount the KaTeX directory you want to test into the
|
||||
`/KaTeX` directory in the docker, and run the `ss` docker, like so:
|
||||
|
||||
docker run --volume=/your/KaTeX/:/KaTeX ss
|
||||
|
||||
The `--volume=/your/KaTeX:/KaTeX` switch mounts your KaTeX directory into the
|
||||
docker. Note this is a read-write mounting, so the new screenshots will be
|
||||
directly placed into your KaTeX directory.
|
||||
|
||||
Since this docker is very self-contained, there should be no need to do
|
||||
interactive management of the docker, but if you feel the need, you can read the
|
||||
General Docker Help section of the MathJaxFonts docker readme.
|
||||
|
||||
That's it!
|
||||
107
dockers/Screenshotter/screenshotter.py
Executable file
107
dockers/Screenshotter/screenshotter.py
Executable file
@@ -0,0 +1,107 @@
|
||||
#!/usr/bin/env python2
|
||||
|
||||
import argparse
|
||||
import json
|
||||
import os
|
||||
import png
|
||||
import StringIO
|
||||
import sys
|
||||
|
||||
from selenium import webdriver
|
||||
|
||||
|
||||
def get_png_size(png_data):
|
||||
w, h, _, _ = png.Reader(file=StringIO.StringIO(png_data)).read()
|
||||
return (w, h)
|
||||
|
||||
|
||||
def set_driver_size(driver, width, height):
|
||||
"""Correctly sets the size of the driver window so screenshots end up the
|
||||
provided size"""
|
||||
driver.set_window_size(width, height)
|
||||
|
||||
screenshot_size = get_png_size(driver.get_screenshot_as_png())
|
||||
attempts = 0
|
||||
while (width, height) != screenshot_size:
|
||||
attempts += 1
|
||||
if attempts > 5:
|
||||
print "Tried 5 times to size screen correctly, bailing out"
|
||||
exit(1)
|
||||
|
||||
ss_width, ss_height = screenshot_size
|
||||
driver.set_window_size(
|
||||
width + (width - ss_width),
|
||||
height + (height - ss_height))
|
||||
screenshot_size = get_png_size(driver.get_screenshot_as_png())
|
||||
|
||||
|
||||
def main():
|
||||
parser = argparse.ArgumentParser(
|
||||
description='Take screenshots of webpages', add_help=False)
|
||||
parser.add_argument('file', metavar='file.json')
|
||||
parser.add_argument('-t', '--tests', metavar='test', nargs='*')
|
||||
parser.add_argument('-w', '--width', metavar='width', default=1024,
|
||||
type=int)
|
||||
parser.add_argument('-h', '--height', metavar='height', default=768,
|
||||
type=int)
|
||||
parser.add_argument('-b', '--browser', metavar='browser',
|
||||
choices=['firefox'], default='firefox')
|
||||
|
||||
args = parser.parse_args()
|
||||
|
||||
data = None
|
||||
with open(args.file) as f:
|
||||
try:
|
||||
data = json.load(f)
|
||||
except ValueError:
|
||||
print "Invalid json in input file:", args.file
|
||||
exit(1)
|
||||
|
||||
tests = []
|
||||
|
||||
if args.tests is None:
|
||||
tests = data.keys()
|
||||
else:
|
||||
data_tests = data.keys()
|
||||
for test in args.tests:
|
||||
if test not in data_tests:
|
||||
print "Unknown test:", test
|
||||
exit(1)
|
||||
|
||||
tests = args.tests
|
||||
|
||||
print "Starting up"
|
||||
sys.stdout.flush()
|
||||
|
||||
driver = None
|
||||
if args.browser == 'firefox':
|
||||
driver = webdriver.Firefox()
|
||||
else:
|
||||
print "Unknown browser:", args.browser
|
||||
exit(1)
|
||||
|
||||
set_driver_size(driver, args.width, args.height)
|
||||
|
||||
data_dir = os.path.join(
|
||||
os.path.dirname(os.path.realpath(args.file)), "images")
|
||||
|
||||
try:
|
||||
os.mkdir(data_dir)
|
||||
except OSError:
|
||||
pass
|
||||
|
||||
for test, url in data.iteritems():
|
||||
if test in tests:
|
||||
filename = os.path.join(
|
||||
data_dir, '%s-%s.png' % (test, args.browser))
|
||||
|
||||
print "Running:", test
|
||||
sys.stdout.flush()
|
||||
|
||||
driver.get(url)
|
||||
driver.get_screenshot_as_file(filename)
|
||||
|
||||
print "Done"
|
||||
|
||||
if __name__ == '__main__':
|
||||
main()
|
||||
Reference in New Issue
Block a user