Merken

Implementing a visual CSS testing framework

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
and this and that have you in will carry having on and I have a lot of that having some having me here I mean it started so today I'm talking about implementing a visual CSS testing framework and we're
gonna be using automatic speech I comparison to catch our regression my name's just and just
introduce myself and I'm just a cart on most of the Internet and I work at a company
called exact over and their Francisco and bonds studies it is an exception monitoring tool and I was offered here they're working primarily in review java scripts of our 2nd blossom modeling which is but we also
have area virus was linked to the brain works so we have support through things like . net Over the unity of the objectives seed angular and so people LDA model the there's a crashes from all the different application all the same place and we are also currently hiring
so pleasing get get in touch with me either with me or at our booth with Carroll's comes as interesting work a developer tools of reform company and also as a group we have a modern figures of like those are 2 things you know us and I also wanted to let you know
that I have a written version of this topic of my my talk faster so slide might go by quickly and so if you're interested in the written version I can go to the book stands other things blogging and you can buy it there so back to the whole implementing a visual
of testing for the wider might even talking about well as we all know writing
reading it could reviewing the that's all that can be really intense and even more
intense to refactor and generally this is the latest looks like when working with CSS and at once now we decided we would take on a huge will play we project at the entire organizational and codes are factor so we want a way to test that all of our cells look the same despite changing Boulder CO and
fortunately is you can tell that it will always work out for us and we went through many iterations of refactoring and we realized we needed a tool to help us have the pages automatically otherwise our process looks a lot like 0 have you visited all the pages have you do that the clicked on that without the board of the and that didn't really work out for us because that was the is wasting a lot of develop attack so we need a better way so we went on the hunt for a
way to test our CSS we wanted to know if there is a tool already that did wanted and we don't exactly know what we would is that we want get those kind an interesting journey but we done up on the internet
and so we found quite a few libraries it does so it took a bit of digging to compile a list like this but there are definitely up quite a few libraries available doing something similar to this but and we decided from the list of what we call online we try a few in the what happens
so 1 of the 1st 3 words we stumbled upon and was 1 of Facebook's Open source libraries Huxley
in Huxley's reading it says that what is you browse it take screenshots and it tells you when they change which found the main thing that felt like something that you looking for but I
have noticed that I hadn't been updated over a year like OK that's not promising but maybe it's completely that maybe there's no by the mid and about so so a no that's not what happens on after
good solid day of fiddling around that try to implement that it didn't work sometimes they ended up being a little bit to body for us is something we're trying to find bonds within a while whole lot of more bugs happening and so have remained bilayers we would take screenshots him sorry I think this is not the 2 were looking for so we moved not
and so we tried another library like he hadn't this 1 let you make assertions by appears omens and their relationships and how actually sell the browser so that reader to us of it about shot and but I was an
example code to see how it actually worked in action and I quickly decided I do want to use a library where I'd have to be manually checking how many pixels away something is theory testbed like online 11 over here and I want I don't wanna check this link can pixels away because stuff changes like designed iterate quickly we don't be checking manually all those different heights so I wanna make free work that i wanna framework that can be smarter than that it did need to understand all the heights so this award and
so the we try to see more after this and we can have the same of failure going on like 0 this 1 has to check e-mail in land screenshots are quite working so we do we we we couldn't quite find we wanted in
this list of but like I said there are a lot of frameworks so before you go off and run wholly on how a writer male and I mean you should check through these frameworks of you the main to something that you're looking for but I decided I needed figure out what I wanted
so it's early thinking about it what would fit the way that but there is no best I decided I wanted to be visual so to take screenshots not for their namely that measure everything and we decided we wanted a
way to somehow in are up to 2 points like say we had production of light on the left and we want to compare it with something that we have locally like on the right are testing so thinking about using get
let's say we had a feature brands that we just made it up was to committee of and take a look at what our homepage of like on that branch 1st is how our hope is of some production or what's currently running a master the so with those 2 different points in time we wanna spot those differences they're happening like see we have the normal header on the left instance our matches massive branch and on the testing had on the right on our feature branch and with those we
want a way to produce some sort of highlighted area where those differences are automatically it yeah
so our bonds that are web Dutch words written rails so this makes with the fact I wanted to test stick screenshots are really affected my decision is going to write my own framework allows existing CSS testing frameworks word were using java scripts a lot of them were node-based and stuff but I wanted to take advantage of the fact of using rails at age on
so I have but then we also use get for our source control and music the feature branch rest this is kind of important in case of you may not use the but what that means for us
is we have a master branch which is always deployable structure radii but acknowledged case the generally it always put the level of vector a and so whenever non-occluded feature will do is will branch off of master until that features ready and or mergers yeah so considering the tools we have at our
disposal and after taking a look at them the screenshot in libraries I showed you I realize that there was actually that much code to a lot of of on so as 1 does I decided
I was the right 1 myself which always goes well of but just as a disclaimer this talk is not about like here's Michael J. and you should use it as this sort of walking you through the process I went through to create this framework and in fact is actually jam or even open source of sorry but is a blog post of interested in the kind of thing so I 1st
decided that I should come up with the process of how I want my test to work so so that I had an idea of what I wanted to accomplish building this tool so number 1 I needed
a way to somehow automatically the pages of our sigh so the test would in an
actual browser uh hit each page of a site on a local server the 1 of the test visit the
page I want the test to take a screenshot about age so the importance of the
screenshot is that and wanted to take a switch out of the entire page and not just our
current you work in a browser and so
for example if a change happened below the fold of the site like we change the forum of the fluid as we would we would need to have that full-page otherwise we would be able to capture a desktop so next time you the worst
always which often taking and I need a way to upload and download the screenshots from the storage area so using get
every time it made up push sure branch by problems which are of the precision of each page including a master branch and if I had a speech already uploaded toward storage area from a master branch I need way to upload my current features branch to that storage area and download my already uploaded masses up from there yeah and after uploading
resting shots had been in a way to make a dif of my speech so I want to differ between
speech item master balance from a storage area and the scriptwriter on my future branch so if I had a previous
progenitor which would be the current commit answer forces my practice branch out and in a way to mark those differences between those visually and produce some sort of
different we've seen before that we can view showing the differences between images and finally
after I had destroy screenshots I need a way to view these deaths but you cannot have a please upload them but in an accessible way for everyone on the project but that so that they can view the distant shots depending on the committee so we
need some sort of page on best in order to view of the different branches and the common
and when you would click through it would show you all the speech of the deaths the so
we don't want but now we can start to try building our framework run the thing that we need at but 1st off we need a way to write
and test will run automatically after each Polish so we decided use hours R. selective you are familiar
it the tool at the testing tool for the Ruby programming language and we are uses of power spectra tests in around that so instead to continue that trend and so we want to build
respect that looks something like this where we would just built a low but navigate to local your own and they must be John about page we want to keep them simple like this and right now not have like any assertions that would call the hospital other than the test feeling for some technical reason like didn't end up running and we also on these tests we separate for remained tests as we the mark them out in some way us so what we are is that have
that feature available so we pulled out the visual specs into their own or spectacular called visual that way the specs run with our means that's we were running of the local and I almost exclusively 1 them to the and this also made its way to break our specs or CI we
wanted to break our visual specs for a few reasons number 1 was a local build speed and if attacked the verbal tests were bogged down by women were visual specs and become a huge issue for us and by having a broken out we can iterate Gramene aspects faster and build a push were often and number 2 is the with
our the so we want an army inspectors still be fastener CI as so that we can merge non-visual poor requests without waiting for a visual effects to finish the i or a continuous
integration for not from there is a way for us to automatically run our test the when we push things to get and after a spectral our CI were able the building the on get which is pretty handy and again it also had a teacher where you can put up your bills so we can let our visual effects for me fact here as we can quickly see whether our visual builders passing or the main facts without build being combined so we commit non-visual thing and factor passing we converted but that that
at but then you build paper CIA the
light allows us to add steps for our tests and that way we can run our means that's 1st apart from visual effects and when the separate are visual spectacle slowdown remains in the murderer on work at the next
meeting the weights of the web pages and takes terms of ours protests and for that we decided to use light
so let as a tool for automating brothers for testing purposes as we would need to use typically the weather every PI and this would allow us to drive a brother natively on a local or remote machine and more specifically in this just provides an API between us and the problem to use linear and we need to
use a service like some the browser stack we need to use a service like this because the access to an actual rather and since we're using the idea that the just have built uh brothers built in on the server and so we don't have to set up our own virtual machines that orders usually services so in a kind of it the as a
before a visual tests we need start up our proxy rather stack and of 4 Carell's there and then we need and then we need an instance of artfully driver and then of course the police task to terminate the services and we also have to allow but not not only in visual tests 11 landmark is the library for studying Anthony expectations on each peer request and relief so in these entered disable outside web requests during our tests we needed to enable in order to run real web requests so that we can use our local server is a each other but only other visual facts so together arouses that party running you just want a new brothers stock process and then we need to build a journey and to get a real server running with that of the new roles process a little a little of is currently running and terminated the same way as the promise so to set up our selenium whatever we have the path of the capabilities we wanted and I like our rather than rather version which is Firefox and 31 in this example and we don't have to pass the URL to head which is pointed out brothers at which appear but variable are slowly Reverend easy but when Australia we did learn some interesting things about his of the 2 parameters at
so as a reminder with our whatever driver everyone had webpages a real brother and ability to
out of the full page not just the current you and
unfortunately this feature I going to work in prior art is not ideal and and
exploring called the work for me we can only transform this tool retrieving and any the at a refactoring tool with me that her brother had ability or anything like that so all those those ideal this will work for our purposes right now is refactoring told and however this alone but I implemented it a few months ago and I have heard of people that have got it working from and so there is hope that we can change the so after that partly driver
an hour for growth are we could and then we could then start feeding our speech of the test so we use honestly when driver to navigate to follow postural your own and then we have the worst which after navigating successfully it when there's been trapped we need to set up a local speech on directory so that we can have a nice clean place double the speech of locally and then we only have 1 thing to remember when you're done successfully uploading of strange up the and then after we have a folder we need to use our drivers the the screenshot and there we can just pass happy wanted to save tail along with some other things so that we can properly so after a writing
are writing tests for static pages that is our page we could we realize going into the dashboard and we have an issue with dynamic data like those images produced gets all over the place so
with that in the medium of positive test because data change between viewing times so the comment this without a picture data for our tests in manually adjusted any other data are not covered by features using selenium JavaScript support so that we don't get up of of that death
so now we have that we have are tested at the top of the point right so we have a way to make a dif between tumor screenshot ImageMagick worked perfectly for less I'm
having literally 1 of the worst I have her seeing a it did exactly what we needed so and magic is a tool to convert at and compose images yeah and that is not the kind of milling
tool and 1 of them is compare and that what when using compare with various options enabled allowed us to show and produce district of this to others which are so for example we would make a simple
change like 200 the not a good fathers differences for hours and provide did he
the of agentic think that the image and
have a lot of options you can pass it compared to walk and we do take advantage of a few of these options in order to make this work so let's go
back and I go through each 1 of these options that explain to you how a using of the enigmatic compared to from the website it will mathematically visually annotated differences an image and its reconstruction on my terms l it so compare lets you provide a metric that outputs to standard error a measure of the differences between 2 images according to type given track so here were using GATE working stands for peak absolute and we can use the gasoline to find beside the fun factor needed to make all the pixels somewhere so if we
have at 1 instant up to that were pretty different yeah it would end up producing a like
best and API absolute measurement will be
outputted as immediate huge further factor think all the pixel similar or to be that way
but the fact that in the important in case you want to ignore pixel would only change by small mouth and we might actually want to be using them in case of both positive like for example sometimes the previous writer slightly differently depending on on 2 different images depending on the prowl the female want help that as an issue we don't use the upper right now but it would be important if you wanted to make an assertion your test meaningful like actually have the failure of a gift was produced by a certain amount of but we do and of doing that because it doesn't necessarily mean something of ball if a diff is produced so on the next ischial which was a few times the running aspects we know the this were even being produced in we were trying to figure out why and we denote the screenshots
and realize that they were 2 different heights were cited for such for some reason I like we may change actually rule before the and and it will let us do people compare with images so we have you thought and research so searching is required
to have compare search for the best match location of small image with a larger image that's not to reduce or to frame of image rather problem and the 1st the difference image which there were interested in and then the 2nd image would be the match score image so the mass or image is small image containing a pixel for every possible position of the top left corner of the given the image the search will try to compare the sub-image at every possible location in larger image and and because of this searching the very slow but as you can guess the smaller the farther is the faster the search yeah that being said and this option does actually take effect unless you have 2 images better different sizes and the section this doesn't happen often to us we're not only chopping our brains and half so that's fine and so the market slows down are visual spectrum of the i'm not meaningful especially those aspects are tied for me fact so another 1 thing we ran into is sometimes dots we talked were completely different and they were completely different
voice for testing of our website and
energetic with not having that in fact it would even give again because there is so different so we found an option called the dissimilarity threshold this special determine how did how different you of images could be in order to get them in the vaulted to you point your tribe that so we have that to 1 of the images can be completely different but generally you don't need to do that because you're here things are really changing Write so much and this is just for testing our tool and the only caveat to that as you might guess is doing just completely different images can that attacked by a lot and so like our previous is to issue with some of the searching this number happens was much at all and since the tensors of performance that's not a huge issue the black area exciting purchase records each where masters and were a toasted it to so OK
were downloaded article adds another we have our speech out and that's the meaning of the word to throws range of online and we need to build a grab them back out the real so we that use AWS in the US or in the Web
services others about storage and how the Ruby API so will store and retrieve our screenshots from 1 of the bucket the we need is
that of our but then the other really I using a axis Katie in thicker acts of key and we may know about the public that shot word because there's been lots so then in respect to call the shots and that would take care of Singapore speech as directory are taking the Arts and the uploading of screenshots to 8 of the the so inside of that safe shot after successfully got speech job in federal little thing toppled the we call our the shot date of and are the shots a game yes that that would be responsible for getting a reference Pinchot are masses which are at distant shot at the last it also download or masses which are in order to reduce the debt that we can then uploaded it to about it so 1st we define the criteria right and left pocket and the upload our current speech on AWS after that we download the masses range are that we need to produce the death with and we find as we try to their current shop our current get shot and all right hopefully job wants to update adult do that the public unintelligible on and again world that of so that we momentum of masses which are that we need to produce glass and we find that the chinese occuring get shot and we all the spins are down to local temporary drop folder we made then we check if we had our laughter screenshot in if we did we do not find it would not you compare their top earlier in order to produce are different age and we gave it to the same local storage area after that we need to upload answers reduction surgery and and then we need to upload newly may get surgery and and then we would have finished our whole round of the talk data next the
Bank of NIW bucket we ended up using and the pattern of commit shot area of sight hearing image by so for example we can have a clear
shot at a 1 a 1 a 1 a and wearing the on the marking part of our sites on the next page death for that page they don't
have to be the current majority of the masses which are we don't have a degree of it or the did we made from the trees which are
so now we have images uploaded data the AWS we need a way to you that but during this point through a bucket was far less than ideal of violent but you know what your whole thing going in there and try speech so it's under that of our own custom during page there haven't afterward so we created a page or 2 layers I
showed you earlier and that was another current ranges for the last 3 command the control action takes
care grabbing a remote branches and making sure the in aid of less and then implement the branch names correctly for the 0 then interview we loop through and show all or branches and we also provide a way to prove horrible branches we can keep this area clean without forcing a proven every time you look the page and pruning our would be if the boys running get remote order the so
then when you click through a sonnet you with the by area of speech up and get and individual action partial pages
grab areas and pages based on current shot out of our bucket as ligands late in the view of and in our view we iterate through each area and each page in order to show our images as well as the currents and are messages were very so will we
need this article is done but it's not perfect right now but I think there is some prove the improvements we can make that in the future
so for example right now all of test half whether or not there's a death and not only filters this issue executing the test so it could be interesting to make oxygen means something like fail if there's a death of a we didn't think more about that because like I said a distance in Estonia pillars another thing we want to
consider is accounting for a 0 per cent so
maybe we shouldn't uploaded to him at all there's no diff between images this could be was based on a AWS pocket as well speed of our test because we're trying upload your screenshot I know Nicaraguan . were left messy and we also
think it could be nice to automatically link these 2 get help or request so when differs
greed and maybe automatically attach onto its relative for quest up because some a little tricky because maybe we don't want great damage noise every time we pledge ombudsman idea
and another thing is that we currently only did between are currently on a branch reasons our current was recently on on after so when we push a newcomer to our
branch filtered inverse of the last thing I was pushed a master and in this way we know exchange between feature that working on what currently running production it would be nice if we
could get on laughter with the current most recently that pursues its previous comments and
so that way in case you push a visual change directly to master you can still the different it would also be
nice if you get between a previous command on the cur rent as well so if you push it commit your
brain to changes in the officially you know the dip between those two year regardless of what having a master
at also really love to get this has got to more brothers and that would enable us to make this into a backwards compatibility tool as well the arnaq browser comparison that we can make sure things are messed up in the attic or but and anyway that the path that
was mentioned my might feel free to find the online ordering conference on talk more about the stuff are just 1 thing I and I
also wanted to know to mention that working on a book with just a media about command line tutorial theory that I wrote in a blog was 3 . 1 0 so this very early stages right now the feel free to that page which we have done on large just another UNIX command line in graph announcements and anything any nuclear few
committee have any questions yeah having been marginalized and my current tool and I telling to where to go for each page or the just reversing that and say automatically right now I'm telling it which page to go on and also were using selenium the click around in case you wanna check models that different states and so there's no way to automatically traverse for us right now but I'm sure it's something that you could end up implementing the we do find a very valuable to be able to click around and change state in order to capture the the question is are
we getting back in the metrics on the image matching give that back some metrics but we already have capturing about now that would be very easy to capture it because this just outputting standard error to hear and and implement it somewhere but currently were not I at that this question is did we explore about committing the images that we can you get in order to check it out up until very recently gate was generally diet of recommended for images because what happens every time you punch that uh at the Regal get exponentially larger I believe that because current continuing meeting all those images and are evil get quite large however get get have just released a did I leave that you care about but we haven't looked into that yet so that would be an interesting idea I think they knew who might use my his fans
Softwaretest
Softwaretest
Framework <Informatik>
Visualisierung
Visuelles System
Framework <Informatik>
Computeranimation
Cross-site scripting
Beobachtungsstudie
OISC
Informationsmodellierung
Synchronisierung
Lineare Regression
Entscheidungsmodell
Skript <Programm>
Ausnahmebehandlung
Sprachsynthese
Paarvergleich
Computeranimation
Internetworking
Maschinenschreiben
Computervirus
Synchronisierung
Gruppenkeim
Systemzusammenbruch
Kartesische Koordinaten
Computeranimation
Eins
Objekt <Kategorie>
Informationsmodellierung
Flächeninhalt
Gewicht <Mathematik>
Softwareentwickler
Softwaretest
Rechenschieber
Softwaretest
Framework <Informatik>
Versionsverwaltung
Stereometrie
Visuelles System
Computeranimation
Schlussregel
Softwaretest
Prozess <Physik>
Codierung
Iteration
Zellularer Automat
Projektive Ebene
Softwareentwickler
Refactoring
Whiteboard
Teilbarkeit
Computeranimation
Homepage
Binärdaten
Bit
Programmbibliothek
Farbverwaltungssystem
Mailing-Liste
Computeranimation
Internetworking
Facebook
Touchscreen
Open Source
Programmbibliothek
Wort <Informatik>
Computeranimation
Bit
Browser
Programmbibliothek
Computeranimation
Programmfehler
Pixel
Mathematisierung
Gruppenoperation
Browser
Binder <Informatik>
Framework <Informatik>
Physikalische Theorie
Code
Computeranimation
Homepage
Font
Funktion <Mathematik>
Programmbibliothek
Minimum
Billard <Mathematik>
Programmbibliothek
E-Mail
Volumentomographie
Figurierte Zahl
Einflussgröße
Framework <Informatik>
Computeranimation
Softwaretest
Subtraktion
Punkt
Matching <Graphentheorie>
Rechter Winkel
Kommandosprache
Verzweigendes Programm
Ruhmasse
Biprodukt
E-Mail
Computeranimation
Instantiierung
Softwaretest
Benutzerbeteiligung
Subtraktion
Flächeninhalt
Applet
Skript <Programm>
Wort <Informatik>
Framework <Informatik>
Quick-Sort
Computeranimation
Entscheidungstheorie
Radius
Gruppe <Mathematik>
Verzweigendes Programm
Versionsverwaltung
Vektorraum
Datenstruktur
Innerer Punkt
Computeranimation
Übergang
Prozess <Physik>
Web log
Programmbibliothek
Quick-Sort
Framework <Informatik>
Code
Computeranimation
Softwaretest
Web Site
Prozess <Physik>
Browser
Gebäude <Mathematik>
Server
Zahlenbereich
Systemzusammenbruch
Computeranimation
Homepage
Web Site
Flächeninhalt
Webforum
Fluid
Browser
Mathematisierung
Speicher <Informatik>
Systemzusammenbruch
Innerer Punkt
Computeranimation
Homepage
Flächeninhalt
Digitale Videotechnik
Verzweigendes Programm
Ruhmasse
Sprachsynthese
Strömungsrichtung
Speicher <Informatik>
Computeranimation
Homepage
Summengleichung
Subtraktion
Forcing
Flächeninhalt
Verzweigendes Programm
Sprachsynthese
Speicher <Informatik>
Bildgebendes Verfahren
Computeranimation
Verzweigendes Programm
Indexberechnung
Ikosaeder
Sprachsynthese
Projektive Ebene
Ordnung <Mathematik>
Quick-Sort
Computeranimation
Homepage
Programmiersprache
Softwaretest
Framework <Informatik>
Gebäude <Mathematik>
Innerer Punkt
Framework <Informatik>
Computeranimation
Leistung <Physik>
Arithmetisches Mittel
Softwaretest
Weg <Topologie>
Indexberechnung
Web Site
Flächeninhalt
Druckertreiber
Visuelles System
Computeranimation
Homepage
Homepage
Soundverarbeitung
Softwaretest
Iteration
Zahlenbereich
Bildschirmfenster
Computeranimation
Softwaretest
Soundverarbeitung
Message-Passing
Teilbarkeit
Computeranimation
Integral
Soundverarbeitung
Arithmetisches Mittel
Softwaretest
Virtuelle Maschine
Softwaretest
Gewicht <Mathematik>
Familie <Mathematik>
Visualisierung
Web-Seite
Term
Computeranimation
Proxy Server
Server
Stellenring
Prozess <Physik>
Betragsfläche
Browser
Versionsverwaltung
Familie <Mathematik>
Computeranimation
Task
Virtuelle Maschine
Benutzerbeteiligung
Erwartungswert
Softwaretest
Reelle Zahl
Programmbibliothek
Statistische Analyse
Mobiles Internet
Euler-Diagramm
Druckertreiber
Große Vereinheitlichung
Softwaretest
Prozess <Informatik>
Browser
Peer-to-Peer-Netz
Keller <Informatik>
Portscanner
Dienst <Informatik>
Druckertreiber
Server
Ordnung <Mathematik>
Instantiierung
Information Retrieval
Druckertreiber
Reelle Zahl
Familie <Mathematik>
Web-Seite
Systemzusammenbruch
Innerer Punkt
Computeranimation
Homepage
Softwaretest
Fehlermeldung
Diskretes System
Weg <Topologie>
Stellenring
Schreiben <Datenverarbeitung>
Indexberechnung
Sprachsynthese
Computeranimation
Homepage
Homepage
Hydrostatik
Verzeichnisdienst
Druckertreiber
Touchscreen
Flächeninhalt
Mini-Disc
Druckertreiber
Verzeichnisdienst
Bildgebendes Verfahren
Softwaretest
Punkt
Ortsoperator
Rechter Winkel
Mathematisierung
Digitale Videotechnik
Einfügungsdämpfung
Computeranimation
Physikalisches System
Subtraktion
Flächeninhalt
Schwellwertverfahren
Computeranimation
Homepage
Konfiguration <Informatik>
Web Site
Subtraktion
Pixel
Güte der Anpassung
Mathematisierung
Term
Teilbarkeit
Stichprobenfehler
Computeranimation
Homepage
Konfiguration <Informatik>
Physikalisches System
Weg <Topologie>
Verknüpfungsglied
Betrag <Mathematik>
Subtraktion
Datentyp
Flächeninhalt
Schwellwertverfahren
Ordnung <Mathematik>
Einflussgröße
Bildgebendes Verfahren
Gammafunktion
Subtraktion
Pixel
Linienelement
Web Site
Ähnlichkeitsgeometrie
Ähnlichkeitsgeometrie
Teilbarkeit
Computeranimation
Homepage
Arithmetisches Mittel
Physikalisches System
Spezialrechner
Betrag <Mathematik>
Rechter Winkel
Subtraktion
Flächeninhalt
Schwellwertverfahren
Einflussgröße
Bildgebendes Verfahren
Soundverarbeitung
Subtraktion
Pixel
Matching <Graphentheorie>
Ortsoperator
Ruhmasse
Schlussregel
Paarvergleich
Computeranimation
Homepage
Konfiguration <Informatik>
Physikalisches System
Subtraktion
Flächeninhalt
Schwellwertverfahren
Garbentheorie
URL
Bildgebendes Verfahren
Softwaretest
Schwellwertverfahren
Linienelement
Zahlenbereich
Ähnlichkeitsgeometrie
EINKAUF <Programm>
Computeranimation
Homepage
Konfiguration <Informatik>
Physikalisches System
Datensatz
Tensor
Flächeninhalt
Subtraktion
Flächeninhalt
Schwellwertverfahren
Ordnung <Mathematik>
Bildgebendes Verfahren
Impuls
Stellenring
Weg <Topologie>
Unrundheit
Kartesische Koordinaten
Sprachsynthese
Computeranimation
Homepage
Benutzerbeteiligung
Spannweite <Stochastik>
Verzeichnisdienst
Spieltheorie
Prozess <Informatik>
Flächeninhalt
Speicher <Informatik>
Tropfen
Druckertreiber
Fehlermeldung
Stellenring
Ruhmasse
Indexberechnung
Strömungsrichtung
Ausgleichsrechnung
Ordnungsreduktion
Arithmetisches Mittel
Chirurgie <Mathematik>
Dienst <Informatik>
Flächeninhalt
Touchscreen
Wort <Informatik>
Ordnung <Mathematik>
Verzeichnisdienst
Schlüsselverwaltung
Web Site
Indexberechnung
Ruhmasse
Web Site
E-Mail
Hinterlegungsverfahren <Kryptologie>
Computeranimation
Homepage
Netzwerktopologie
Spezialrechner
Minimalgrad
Flächeninhalt
Mustersprache
Mereologie
Flächeninhalt
Strom <Mathematik>
Chi-Quadrat-Verteilung
Bildgebendes Verfahren
Internetworking
Spannweite <Stochastik>
Punkt
Einheit <Mathematik>
Gruppenoperation
Gamecontroller
Sprachsynthese
Bildgebendes Verfahren
Computeranimation
Homepage
Mailing-Liste
Synchronisierung
Flächeninhalt
Gruppenoperation
Verzweigendes Programm
Indexberechnung
Sprachsynthese
Partielle Differentiation
Ordnung <Mathematik>
Computeranimation
Homepage
Hash-Algorithmus
Sichtenkonzept
Kontrollstruktur
Flächeninhalt
Division
Strömungsrichtung
Ordnung <Mathematik>
Message-Passing
Bildgebendes Verfahren
Computeranimation
Homepage
Homepage
Softwaretest
Filter <Stochastik>
Abstand
Computeranimation
Subtraktion
Geräusch
Visuelles System
Bildgebendes Verfahren
Computeranimation
Filetransferprotokoll
Verzweigendes Programm
Inverse
Verzweigendes Programm
Strömungsrichtung
Strom <Mathematik>
Biprodukt
Menge
Computeranimation
Verzweigendes Programm
Browser
Mathematisierung
Familie <Mathematik>
Paarvergleich
Strom <Mathematik>
Computeranimation
Filetransferprotokoll
Graph
Web log
Hypermedia
Physikalische Theorie
Computeranimation
Homepage
Informationsmodellierung
Verknüpfungsglied
Verbandstheorie
Linienelement
Fächer <Mathematik>
Mathematisierung
Ordnung <Mathematik>
Stichprobenfehler
Bildgebendes Verfahren
Homepage
Aggregatzustand

Metadaten

Formale Metadaten

Titel Implementing a visual CSS testing framework
Serientitel RailsConf 2015
Teil 60
Anzahl der Teile 94
Autor Dillon, Jessica
Lizenz CC-Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported:
Sie dürfen das Werk bzw. den Inhalt zu jedem legalen und nicht-kommerziellen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen und das Werk bzw. diesen Inhalt auch in veränderter Form nur unter den Bedingungen dieser Lizenz weitergeben.
DOI 10.5446/30673
Herausgeber Confreaks, LLC
Erscheinungsjahr 2015
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract Working with large CSS codebases can be hard. Large-scale refactors, or even just tweaking styles on our more general elements, could end up having unintended consequences on the rest of the site. To catch these problems, we manually check every page on our site, which is a slow and error-prone approach. We need a better way to test our CSS. This talk will walk through how we implemented a visual CSS testing framework using RSpec & Selenium, using automatic screenshot comparison to catch style regressions.

Ähnliche Filme

Loading...