Recherche avancée
Médias (1)
-
La conservation du net art au musée. Les stratégies à l’œuvre
26 mai 2011
Mis à jour : Juillet 2013
Langue : français
Type : Texte
Autres articles (96)
-
Configuration spécifique d’Apache
4 février 2011, parModules spécifiques
Pour la configuration d’Apache, il est conseillé d’activer certains modules non spécifiques à MediaSPIP, mais permettant d’améliorer les performances : mod_deflate et mod_headers pour compresser automatiquement via Apache les pages. Cf ce tutoriel ; mode_expires pour gérer correctement l’expiration des hits. Cf ce tutoriel ;
Il est également conseillé d’ajouter la prise en charge par apache du mime-type pour les fichiers WebM comme indiqué dans ce tutoriel.
Création d’un (...) -
Organiser par catégorie
17 mai 2013, parDans MédiaSPIP, une rubrique a 2 noms : catégorie et rubrique.
Les différents documents stockés dans MédiaSPIP peuvent être rangés dans différentes catégories. On peut créer une catégorie en cliquant sur "publier une catégorie" dans le menu publier en haut à droite ( après authentification ). Une catégorie peut être rangée dans une autre catégorie aussi ce qui fait qu’on peut construire une arborescence de catégories.
Lors de la publication prochaine d’un document, la nouvelle catégorie créée sera proposée (...) -
Submit bugs and patches
13 avril 2011Unfortunately a software is never perfect.
If you think you have found a bug, report it using our ticket system. Please to help us to fix it by providing the following information : the browser you are using, including the exact version as precise an explanation as possible of the problem if possible, the steps taken resulting in the problem a link to the site / page in question
If you think you have solved the bug, fill in a ticket and attach to it a corrective patch.
You may also (...)
Sur d’autres sites (6489)
-
10 Matomo Features You Possibly Didn’t Know About
28 octobre 2022, par ErinMost users know Matomo as the privacy-focussed web analytics tool with data accuracy, superior to Google Analytics.
And we’re thrilled to be that — and more !
At Matomo, our underlying product vision is to provide a full stack of accurate, user-friendly and privacy-mindful online marketing tools.
Over the years, we’ve expanded beyond baseline website statistics. Matomo Cloud users also get to benefit from additional powerful tools for audience segmentation, conversion optimisation, advanced event tracking and more.
Here are the top 10 advanced Matomo features you wish you knew about earlier (but won’t stop using now !).
Funnels
At first glance, most customer journeys look sporadic. But every marketer will tell you that there is a method to almost every users’ madness. Or more precisely — there’s a method you can use to guide users towards conversions.
That’s called a customer journey — a schematic set of steps and actions people complete from developing awareness and interest in your solution to consideration and finally conversion.
On average, 8 touchpoints are required to turn a prospect into a customer. Though the number can be significantly bigger in B2B sales and smaller for B2C Ecommerce websites.
With the Funnels feature, you can first map all the on-site touchpoints (desired actions) for different types of customers. Then examine the results you’re getting as prospects move through these checkbox steps.
Funnel reports provide :
- High-level metrics such as “Funnel conversion rate”, “Number of funnel conversions”, “Number of funnel entries”.
- Drilled-down reports for each funnel and each tracked action within it. This way you can track the success rates of each step and estimate their contribution to the cumulative effect.
Segmented funnel reports for specific user cohorts (with Matomo Segmentation enabled).
What makes funnels so fun (pun intended) ? The variety of use cases and configurations !
You can build funnels to track conversion rates for :
- Newsletter subscriptions
- Job board applications
- Checkout or payment
- Product landing pages
- Seasonal promo campaigns
…. And pretty much any other page where users must complete a meaningful action. So go test this out.
Form Analytics
On-site forms are a 101 tactic for lead generation. For most service businesses, a “contact request” or a “booking inquiry” submission means a new lead in your pipeline.
That said : the average on-site form conversion rates across industries stand at below 50% :
- Property – 37%
- Telecoms – 40%
- Software — 46.83%
That’s not bad, but it could be better. If only you could figure out why people abandon your forms….
Oh wait, Matomo Form Analytics can supply you with answers. Form Analytics provide real-time information on key form metrics — total views, starter rate, submitter rate, conversions and more.
Separately the average form hesitation time is also provided (in other words, the time a user contemplates if filling in a form is worth the effort). Plus, Matomo also tracks the time spent on form submission.
You can review :
- Top drop-off fields – to understand where you are losing prospects. These fields should either be removed or simplified (e.g., with a dropdown menu) to increase conversions.
- Most corrected-field – this will provide a clear indication of where your prospects are struggling with a form. Providing help text can simplify the process and increase conversions.
- Unesserary fields – with this metric, you’ll know which optional fields your leads aren’t interested in filling in and can remove them to help drive conversions.
With Form Analytics, you’ll be able to boost conversions and create a better on-site experience with accurate user data.
A/B testing
Marketing is both an art and a science. A/B testing (or split testing) helps you statistically verify which creative ideas perform better.
A good conversion rate optimisation (CRO) practice is to test different elements and to do so often to find your top contenders.
What can you split test ? Loads of things :
- Page slogans and call-to-actions
- Button or submission form placements
- Different landing page designs and layouts
- Seasonal promo offers and banners
- Pricing information
- Customer testimonial placements
More times than not, those small changes in page design or copy can lead to a double-digit lift in conversion rates. Accounting software Sage saw a 30% traffic boost after changing the homepage layout, copy and CTAs based on split test data. Depositphotos, in turn, got a 9.32% increase in account registration rate (CR) after testing a timed pop-up registration form.
The wrinkle ? A/B testing software isn’t exactly affordable, with tools averaging $119 – $1,995 per month. Plus, you then have to integrate a third-party tool with your website analytics for proper attribution — and this can get messy.
Matomo saves you the hassle in both cases. An A/B testing tool is part of your Cloud subscription and plays nicely with other features — goal tracking, heatmaps, historic visitor profiles and more.
You can run split tests with Matomo on your websites or mobile apps — and find out if version A, B, C or D is the top performer.
Advertising Conversion Exports
A well-executed search marketing or banner remarketing campaign can drive heaps of traffic to your website. But the big question is : How much of it will convert ?
The AdTech industry has a major problem with proper attribution and, because of it, with ad fraud.
Globally, digital ad fraud will cost advertisers a hefty $8 billion by the end of 2022. That’s when another $74 million in ad budgets get wasted per quarter.
The reasons for ad budget waste may vary, but they often have a common denominator : lack of reliable conversion tracking data.
Matomo helps you get a better sense of how you spend your cents with Advertising Conversion Reports. Unlike other MarTech analytics tools, you don’t need to embed any third-party advertising network trackers into your website or compromise user privacy.
Instead, you can easily export accurate conversion data from Matomo (either manually via a CSV file or automated with an HTTPS link) into your Google Ads, Microsoft Advertising or Yandex Ads for cross-validation. This way you can get an objective view of the performance of different campaigns and optimise your budget allocations accordingly.
Find out more about tracking ad campaigns with Matomo.
Matomo Tag Manager
The marketing technology landscape is close to crossing 10,000 different solutions. Cross-platform advertising trackers and all sorts of customer data management tools comprise the bulk of that growing stack.
Remember : Each new tool embed adds extra “weight” to your web page. More tracking scripts equal slower page loading speed — and more frustration for your users. Likewise, extra embeds often means dialling up the developer (which takes time). Or tinkering with the site code yourself (which can result in errors and still raise the need to call a developer).
With Tag Manager, you can easily generate tags for :
- Custom analytics reports
- Newsletter signups
- Affiliates
- Form submission tracking
- Exit popups and surveys
- Ads and more
With Matomo Tag Manager, you can monitor, update or delete everything from one convenient interface. Finally, you can programme custom triggers — conditions when the tag gets activated — and specify data points (variables) it should collect. The latter is a great choice for staying privacy-focused and excluding any sensitive user information from processing.
With our tag management system (TMS), no rogue tags will mess up your analytics or conversion tracking.
Session recordings
User experience (UX) plays a pivotal role in your conversion rates.
A five-year McKinsey study of 300 publicly listed companies found that companies with strong design practices have 32 percentage points higher revenue growth than their peers.
But what makes up a great website design and browsing experience ? Veteran UX designers name seven qualities :
Source : Semantic Studios To figure out if your website meets all these criteria, you can use Session Recording — a tool for recording how users interact with your website.
By observing clicks, mouse moves, scrolls and form interactions you can determine problematic website design areas such as poor header navigation, subpar button placements or “boring” blocks of text.
Such observational studies are a huge part of the UX research process because they provide unbiased data on interaction. Or as Nielsen Norman Group puts it :
“The way to get user data boils down to the basic rules of usability :
- Watch what people actually do.
- Do not believe what people say they do.
- Definitely don’t believe what people predict they may do in the future.”
Most user behaviour analytics tools sell such functionality for a fee. With Matomo Cloud, this feature is included in your subscription.
Heatmaps
While Session Replays provide qualitative insights, Heatmaps supply you with first-hand qualitative insights. Instead of individual user browsing sessions, you get consolidated data on where they click and how they scroll through your website.
Heatmaps are another favourite among UX designers and their CRO peers because you can :
- Validate earlier design decisions around information architecture, page layout, button placements and so on.
- Develop new design hypotheses based on stats and then translate them into website design improvements.
- Identify distractive no-click elements that confuse users and remove them to improve conversions.
- Locate problematic user interface (UI) areas on specific devices or operating systems and improve them for a seamless experience.
To get even more granular results, you can apply up to 100 Matomo segments to drill down on specific user groups, geographies or devices.
This way you can make data-based decisions for A/B testing, updating or redesigning your website pages.
Custom Alerts
When it comes to your website, you don’t want to miss anything big — be it your biggest sales day or a sudden nosedive in traffic.
That’s when Custom Alerts come in handy.
With a few clicks, you can set up email or text-based alerts about important website metrics. Once you hit that metric, Matomo will send a ping.
You can also set different types of Custom Alerts for your teams. For example, your website administrator can get alerted about critical technical performance issues such as a sudden spike in traffic. It can indicate a DDoS attack (in the worst case) — and timely resolution is crucial here. Or suggest that your website is going viral and you might need to provision extra computing resources to ensure optimal site performance.
Your sales team, in turn, can get alerted about new form submissions, so that they can quickly move on to lead scoring and subsequent follow-ups.
Use cases are plentiful with this feature.
Custom Dashboards and Reports
Did you know you can get a personalised view of the main Matomo dashboards ?
By design, we made different website stats available as separate widgets. Hence, you can cherry-pick which stats get a prominent spot. Moreover, you can create and embed custom widgets into your Matomo dashboard to display third-party insights (e.g., POS data).
Set up custom dashboard views for different teams, business stakeholders or clients to keep them in the loop on relevant website metrics.
Custom Reports feature, in turn, lets you slice and dice your traffic analytics the way you please. You can combine up to three different data dimensions per report and then add any number of supported metrics to get a personalised analytics report.
For example, to zoom in on your website performance in a specific target market you can apply “location” (e.g., Germany) and “action type” (e.g., app downloads) dimensions and then get segmented data on metrics such as total visits, conversion rates, revenue and more.
Get to know even more ways to customise Matomo deployment.
Roll Up Report
Need to get aggregated traffic analytics from multiple web properties, but not ready to pay $150K per year for Google Analytics 360 for that ?
We’ve got you with Roll-Up Reporting. You can get a 360-degree view into important KPIs like global revenue, conversion rates or form performance across multiple websites, online stores, mobile apps and even Intranet properties.
Setting up this feature takes minutes, but saves you hours on manually exporting and cross-mapping data from different web analytics tools.
Channel all those saved hours into more productive things like increasing your conversion rates or boosting user engagement.
Avoid Marketing Tool Sprawl with Matomo
With Matomo as your website analytics and conversion optimisation app, you don’t need to switch between different systems, interfaces or have multiple tracking codes embedded on your site.
And you don’t need to cultivate a disparate (and expensive !) MarTech tool stack — and then figure out if each of your tools is compliant with global privacy laws.
All the tools you need are conveniently housed under one roof.
Want to learn more about Matomo features ? Check out product training videos next !
21 day free trial. No credit card required.
-
I am using ffmpeg java library to convert captured screenshots to video. Video output is blurry
2 octobre 2020, par dark princeI am using ffmpeg java library to convert captured screenshots to video. Video which is generated as output is blurry.


I am using bit rate as 9000, frames per sec as 25 and video size as that of desktop screen size.


Any suggestions on how to solve this issue.


P.S. I cannot use ffmpeg.exe and command line due to certain restrictions and hence I am opting for ffmpeg java library.


Any suggestions on the issue or suggestions on any better approach will be helpful.


import java.awt.AWTException;
 import java.awt.Dimension;
 import java.awt.FlowLayout;
 import java.awt.Rectangle;
 import java.awt.Robot;
 import java.awt.Toolkit;
 import java.awt.event.ActionEvent;
 import java.awt.event.ActionListener;
 import java.awt.image.BufferedImage;
 import java.io.File;
 import java.io.IOException;
 import java.util.Date;
 
 import javax.imageio.ImageIO;
 import javax.swing.JButton;
 import javax.swing.JFrame;
 import javax.swing.JLabel;
 import javax.swing.JOptionPane;
 
 import org.bytedeco.javacpp.avcodec;
 import org.bytedeco.javacv.FFmpegFrameRecorder;
 import org.bytedeco.javacv.OpenCVFrameConverter;
 
 public class ScreenRecorder{
 
 public static boolean videoComplete=false;
 public static String inputImageDir="inputImgFolder"+File.separator;
 public static String inputImgExt="png";
 public static String outputVideo="recording.mp4"; 
 public static int counter=0;
 public static int imgProcessed=0;
 public static FFmpegFrameRecorder recorder=null;
 public static int videoWidth=1920;
 public static int videoHeight=1080;
 public static int videoFrameRate=3;
 public static int videoQuality=0; // 0 is the max quality
 public static int videoBitRate=9000;
 public static String videoFormat="mp4";
 public static int videoCodec=avcodec.AV_CODEC_ID_MPEG4;
 public static Thread t1=null;
 public static Thread t2=null;
 public static JFrame frame=null;
 public static boolean isRegionSelected=false;
 public static int c1=0;
 public static int c2=0;
 public static int c3=0;
 public static int c4=0;
 
 
 public static void main(String[] args) {
 
 try {
 if(getRecorder()==null)
 {
 System.out.println("Cannot make recorder object, Exiting program");
 System.exit(0);
 }
 if(getRobot()==null)
 {
 System.out.println("Cannot make robot object, Exiting program");
 System.exit(0);
 }
 File scanFolder=new File(inputImageDir);
 scanFolder.delete();
 scanFolder.mkdirs();
 
 createGUI();
 } catch (Exception e) {
 System.out.println("Exception in program "+e.getMessage());
 }
 }
 
 public static void createGUI()
 {
 frame=new JFrame("Screen Recorder");
 JButton b1=new JButton("Select Region for Recording");
 JButton b2=new JButton("Start Recording");
 JButton b3=new JButton("Stop Recording");
 JLabel l1=new JLabel("<br />If you dont select a region then full screen recording <br /> will be made when you click on Start Recording");
 l1.setFont (l1.getFont ().deriveFont (20.0f));
 b1.addActionListener(new ActionListener() {
 @Override
 public void actionPerformed(ActionEvent e) {
 try {
 JOptionPane.showMessageDialog(frame, "A new window will open. Use your mouse to select the region you like to record");
 new CropRegion().getImage();
 } catch (Exception e1) {
 // TODO Auto-generated catch block
 System.out.println("Issue while trying to call the module to crop region");
 e1.printStackTrace();
 } 
 }
 });
 b2.addActionListener(new ActionListener() {
 @Override
 public void actionPerformed(ActionEvent e) {
 counter=0;
 startRecording();
 }
 });
 b3.addActionListener(new ActionListener() {
 @Override
 public void actionPerformed(ActionEvent e) {
 stopRecording();
 System.out.print("Exiting...");
 System.exit(0);
 }
 });
 
 frame.add(b1);
 frame.add(b2);
 frame.add(b3);
 frame.add(l1);
 frame.setLayout(new FlowLayout(0));
 frame.setVisible(true);
 frame.setSize(1000, 170);
 frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 }
 
 public static void startRecording()
 {
 t1=new Thread()
 {
 public void run() {
 try {
 takeScreenshot(getRobot());
 } catch (Exception e) {
 JOptionPane.showMessageDialog(frame, "Cannot make robot object, Exiting program "+e.getMessage());
 System.out.println("Cannot make robot object, Exiting program "+e.getMessage());
 System.exit(0);
 }
 }
 };
 
 t2=new Thread()
 {
 public void run() {
 prepareVideo();
 }
 };
 
 t1.start();
 t2.start();
 System.out.println("Started recording at "+new Date());
 }
 
 public static Robot getRobot() throws Exception
 {
 Robot r=null;
 try {
 r = new Robot();
 return r;
 } catch (AWTException e) {
 JOptionPane.showMessageDialog(frame, "Issue while initiating Robot object "+e.getMessage());
 System.out.println("Issue while initiating Robot object "+e.getMessage());
 throw new Exception("Issue while initiating Robot object");
 }
 }
 
 public static void takeScreenshot(Robot r)
 {
 Dimension size = Toolkit.getDefaultToolkit().getScreenSize();
 Rectangle rec=new Rectangle(size);
 if(isRegionSelected)
 {
 rec=new Rectangle(c1, c2, c3-c1, c4-c2);
 }
 while(!videoComplete)
 {
 counter++;
 BufferedImage img = r.createScreenCapture(rec);
 try {
 ImageIO.write(img, inputImgExt, new File(inputImageDir+counter+"."+inputImgExt));
 } catch (IOException e) {
 JOptionPane.showMessageDialog(frame, "Got an issue while writing the screenshot to disk "+e.getMessage());
 System.out.println("Got an issue while writing the screenshot to disk "+e.getMessage());
 counter--;
 }
 }
 }
 
 public static void prepareVideo()
 {
 File scanFolder=new File(inputImageDir);
 while(!videoComplete)
 {
 File[] inputFiles=scanFolder.listFiles();
 try {
 getRobot().delay(500);
 } catch (Exception e) {
 }
 //for(int i=0;i/imgProcessed++;
 addImageToVideo(inputFiles[i].getAbsolutePath());
 //String imgToAdd=scanFolder.getAbsolutePath()+File.separator+imgProcessed+"."+inputImgExt;
 //addImageToVideo(imgToAdd);
 //new File(imgToAdd).delete();
 inputFiles[i].delete();
 }
 }
 
 File[] inputFiles=scanFolder.listFiles();
 for(int i=0;i/ maximum quality
 recorder.start();
 }
 catch(Exception e)
 {
 JOptionPane.showMessageDialog(frame, "Exception while starting the recorder object "+e.getMessage());
 System.out.println("Exception while starting the recorder object "+e.getMessage());
 throw new Exception("Unable to start recorder");
 }
 return recorder;
 }
 
 public static OpenCVFrameConverter.ToIplImage getFrameConverter()
 {
 OpenCVFrameConverter.ToIplImage grabberConverter = new OpenCVFrameConverter.ToIplImage();
 return grabberConverter;
 }
 
 public static void addImageToVideo(String imgPath)
 {
 try {
 getRecorder().record(getFrameConverter().convert(cvLoadImage(imgPath)));
 } catch (Exception e) {
 JOptionPane.showMessageDialog(frame, "Exception while adding image to video "+e.getMessage());
 System.out.println("Exception while adding image to video "+e.getMessage());
 }
 }
 
 public static void stopRecording()
 {
 try {
 videoComplete=true;
 System.out.println("Stopping recording at "+new Date());
 t1.join();
 System.out.println("Screenshot thread complete");
 t2.join();
 System.out.println("Video maker thread complete");
 getRecorder().stop();
 System.out.println("Recording has been saved successfully at "+new File(outputVideo).getAbsolutePath());
 JOptionPane.showMessageDialog(frame, "Recording has been saved successfully at "+new File(outputVideo).getAbsolutePath());
 } catch (Exception e) {
 System.out.println("Exception while stopping the recorder "+e.getMessage());
 }
 }
 }


Imagepanel.java


import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Image;
import javax.swing.ImageIcon;
import javax.swing.JPanel;

class ImagePanel
 extends JPanel
{
 private Image img;
 
 public ImagePanel(String img)
 {
 this(new ImageIcon(img).getImage());
 }
 
 public ImagePanel(Image img)
 {
 this.img = img;
 Dimension size = new Dimension(img.getWidth(null), img.getHeight(null));
 
 setPreferredSize(size);
 setMinimumSize(size);
 setMaximumSize(size);
 setSize(size);
 setLayout(null);
 }
 
 public void paintComponent(Graphics g)
 {
 g.drawImage(this.img, 0, 0, null);
 }
}


CropRegion.java


import java.awt.AWTException;
import java.awt.Dimension;
import java.awt.FlowLayout;
import java.awt.Graphics;
import java.awt.Rectangle;
import java.awt.Robot;
import java.awt.Toolkit;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import java.awt.image.BufferedImage;
import java.io.IOException;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JOptionPane;


public class CropRegion implements MouseListener,
 MouseMotionListener {

 int drag_status = 0;
 int c1;
 int c2;
 int c3;
 int c4;
 JFrame frame=null;
 static int counter=0;
 JLabel background=null;

 
 public void getImage() throws AWTException, IOException, InterruptedException {
 Dimension size = Toolkit.getDefaultToolkit().getScreenSize();
 Robot robot = new Robot();
 BufferedImage img = robot.createScreenCapture(new Rectangle(size));
 ImagePanel panel = new ImagePanel(img);
 frame=new JFrame();
 frame.add(panel);
 frame.setLocation(0, 0);
 frame.setSize(size);
 frame.setLayout(new FlowLayout());
 frame.setUndecorated(true);
 frame.setVisible(true);
 frame.addMouseListener(this);
 frame.addMouseMotionListener(this);
 frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
 }

 public void draggedScreen() throws Exception {
 ScreenRecorder.c1=c1;
 ScreenRecorder.c2=c2;
 ScreenRecorder.c3=c3;
 ScreenRecorder.c4=c4;
 ScreenRecorder.isRegionSelected=true;
 JOptionPane.showMessageDialog(frame, "Region Selected.Please click on Start Recording button to record the selected region.");
 frame.dispose();
 }

 public void mouseClicked(MouseEvent arg0) {
 }

 public void mouseEntered(MouseEvent arg0) {
 }

 public void mouseExited(MouseEvent arg0) {
 }

 public void mousePressed(MouseEvent arg0) {
 paint();
 this.c1 = arg0.getX();
 this.c2 = arg0.getY();
 }

 public void mouseReleased(MouseEvent arg0) {
 paint();
 if (this.drag_status == 1) {
 this.c3 = arg0.getX();
 this.c4 = arg0.getY();
 try {
 draggedScreen();
 } catch (Exception e) {
 e.printStackTrace();
 }
 }
 }

 public void mouseDragged(MouseEvent arg0) {
 paint();
 this.drag_status = 1;
 this.c3 = arg0.getX();
 this.c4 = arg0.getY();
 }

 public void mouseMoved(MouseEvent arg0) {
 }

 public void paint() {
 Graphics g = frame.getGraphics();
 frame.repaint();
 int w = this.c1 - this.c3;
 int h = this.c2 - this.c4;
 w *= -1;
 h *= -1;
 if (w < 0) {
 w *= -1;
 }
 g.drawRect(this.c1, this.c2, w, h);
 }
}


-
Our latest improvement to QA : Screenshot Testing
2 octobre 2013, par benaka — DevelopmentIntroduction to QA in Piwik
Like any piece of good software, Piwik comes with a comprehensive QA suite that includes unit and integration tests. The unit tests make sure core components of Piwik work properly. The integration tests make sure Piwik’s tracking and report aggregation and APIs work properly.
To complete our QA suite, we’ve recently added a new type of tests : Screenshot tests, that we use to make sure Piwik’s controller and JavaScript code works properly.
This blog post will explain how they work and describe our experiences setting them up ; we hope to show you an example of innovative QA practices in an active open source project.
Screenshot Tests
As the name implies, our screenshot tests (1) first capture a screenshot of a URL, then (2) compare the result with an expected image. This lets us test the code in Piwik’s controllers and Piwik’s JavaScript simply by specifying a URL.
Contrast this with conventional UI tests that test for page content changes. Such tests require writing large amounts of test code that, at most, check for changes in HTML. Our tests, on the otherhand, will be able to show regressions in CSS and JavaScript rendering logic with a bare minimum of testing code.
Capturing Screenshots
Screenshots are captured using a 3rd party tool. We tried several tools before settling on PhantomJS. PhantomJS executes a JavaScript file with an environment that allows it to create WebKit powered web views. When capturing a screenshot, we supply PhantomJS with a script that :
- opens a web page view,
- loads a URL,
- waits for all AJAX requests to be completed,
- waits for all images to be loaded
- waits for all JavaScript to be run.
Then it renders the completed page to an PNG file.
- To see how we use PhantomJS see capture.js.
- To see how we wait for AJAX requests to complete and images to load see override.js.
Comparing Screenshots
Once a screenshot is generated we test for UI regressions by comparing it with an expected image. There is no sort of fuzzy matching involved. We just check that the images consist of the same bytes.
If a screenshot test fails we use ImageMagick’s compare command line tool to generate an image diff :
In this example above, there was a change that caused the Search box to be hidden in the datatable. This resulted in the whole Data table report being shifted up a few pixels. The differences are visible in red color which gives rapid feedback to the developers what has changed in the last commit.
Screenshot Tests on Travis
We experienced trouble generating identical screenshots on different machines, so our tests were not initially automated by Travis. Once we surpassed this hurdle, we created a new github repo to store our UI tests and screenshots and then enabled the travis build for it. We also made sure that every time a commit is pushed to the Piwik repo, our travis build will push a commit to the UI test repo to run the UI tests.
We decided to create a new repository so the main repository wouldn’t be burdened with the large screenshot files (which git would not handle very well). We also made sure the travis build would upload all the generated screenshots to a server so debugging failures would be easier.
Problems we experienced
Getting generated screenshots to render identically on separate machines was quite a challenge. It took months to figure out how to get it right. Here’s what we learned :
Fonts will render identically on different machines, but different machines can pick the wrong fonts. When we first tried getting these tests to run on Travis, we noticed small differences in the way fonts were rendered on different machines. We thought this was an insurmountable problem that would occur due to the libraries installed on these machines. It turns out, the machines were just picking the wrong fonts. After installing certain fonts during our Travis build, everything started working.
Different versions of GD can generate slightly different images. GD is used in Piwik to, among other things, generate sparkline images. Different versions of GD will result in slightly different images. They look the same to the naked eye, but some pixels will have slightly different colors. This is, unfortunately, a problem we couldn’t solve. We couldn’t make sure that everyone who runs the tests uses the same version of GD, so instead we disabled sparklines for UI testing.
What we learned about existing screenshot capturing tools
We tried several screenshot capturing tools before finding one that would work adequately. Here’s what we learned about them :
-
CutyCapt This is the first screenshot capturing tool we tried. CutyCapt is a C++ program that uses QtWebKit to load and take a screenshot of a page. It can’t be used to capture multiple screenshots in one run and it can’t be used to wait for all AJAX/Images/JavaScript to complete/load (at least not currently).
-
PhantomJS This is the solution we eventually chose. PhantomJS is a headless scriptable browser that currently uses WebKit as its rendering engine.
For the most part, PhantomJS is the best solution we found. It reliably renders screenshots, allows JavaScript to be injected into pages it loads, and since it essentially just runs JavaScript code that you provide, it can be made to do whatever you want.
-
SlimerJS SlimerJS is a clone of PhantomJS that uses Gecko as the rendering engine. It is meant to function similarly to PhantomJS. Unfortunately, due to some limitations hard-coded in Mozilla’s software, we couldn’t use it.
For one, SlimerJS is not headless. There is, apparently, no way to do that when embedding Mozilla. You can, however, run it through xvfb, however the fact that it has to create a window means some odd things can happen. When using SlimerJS, we would sometimes end up with images where tooltips would display as if the mouse was hovering over an element. This inconsistency meant we couldn’t use it for our tests.
One tool we didn’t try was Selenium Webdriver. Although Selenium is traditionally used to create tests that check for HTML content, it can be used to generate screenshots. (Note : PhantomJS supports using a remote WebDriver.)
Our Future Plans for Screenshot Testing
At the moment we render a couple dozen screenshots. We test how our PHP code, JavaScript code and CSS makes Piwik’s UI look, but we don’t test how it behaves. This is our next step.
We want to create Screenshot Unit Tests for each UI control Piwik uses (for example, the Data Table View or the Site Selector). These tests would use the Widgetize plugin to load a control by itself, then execute JavaScript that simulates events and user behavior, and finally take a screenshot. This way we can test how our code handles clicks and hovers and all sorts of other behavior.
Screenshots Tests will make Piwik more stable and keep us agile and able to release early and often. Thank you for your support & Spreading the word about Piwik !
Syndiquer tout le site
