Tech Blog

How to “Outbrain” Selenium Tests with Ext framework

Dec 22, 2011 at 6:15 PM by asaf | 19 Comments

Many of our internal applications were developed using the Extjs framework.

Extjs Is a very powerful JavaScript framework and one of the most popular javascript user interface open source framework , however when it comes to automated test with selenium the real challenge begin.

It is very difficult to write automated test to Ext application with selenium because Ext generates many <div> and <span> tags with an automatically-generated ID (something like “ext-comp-11xx”). Accessing these tags through Selenium is the big challenge we are trying to solve. We wanted to find a way to get these automatically-generated IDs automatically.
How do we approach this?

Ext has a component manager, where all of the developers’ components are being saved.  We can “ask” the component manager for the component ID by sending it a descriptor of the component. To simplify – we (the selenium server) tell the component manager “I need the ID of the current visible window which, btw, is labeled as ‘campaign editor’”.

This will look something like:


ComponentLocatorFactory  extjsCmpLoc = new ComponentLocatorFactory(selenuim);

Window testWin = new Window(extjsCmpLoc.createLocator(”campaign editor”Xtype.WINDOW));
Then we can to use Ext window method like close -> testWin.close();

Anther Example :

ComponentLocatorFactory  extjsCmpLoc = new ComponentLocatorFactory(selenuim);

Button newButton = new  Button(extjsCmpLoc.createLocator(“Add Campaign”, ExtjsUtils.Xtype.BUTTON));

newButton.click();

You can ask for all of the visible components by type, by label or both:

TextField flyfromdate = new TextField( extjsCmpLoc.createLocator(ExtjsUtils.Xtype.DATEFIELD, 0));

flyfromdate.setValue(“10/12/2011″);

TextField flytodate = new TextField(extjsCmpLoc.createLocator(ExtjsUtils.Xtype.DATEFIELD,  1));

flytodate.setValue(“10/31/2011″);

Here’s a simple diagram of our solution:

link to project in git-hub : https://github.com/simbal/SelenuimExtend

This solution is Open Source. In the meantime, if you have any questions, feel free to contact me directly. Asaf at outbrain dot com.

Asaf Levy

Asaf@outbrain.com

Posted in Dev Methods, Research, Uncategorized| 19 Comments

Visualizing Our Deployment Pipeline

Aug 1, 2011 at 8:28 AM by Ran Tavory | No Comments

The Annotated Timeline
This graph may seem intimidating at first, so don’t be scared and let’s dive right into it… BTW, you may click on the image to enlarge it.

In this graph the x axis shows the time (date and time of day) and the y axis shows the svn revision number. Each colored line represents a single module (so we have one line for www and one line for the BehavioralEngine etc).

What you would usually see is for each line (representing a module) a monotonically increasing value over time, a line from the bottom left corner towards the top right corner, however, in relatively rare cases where a developer wants to deploy an older version of his module, then you clearly see it by the line suddenly dropping down a bit instead of climbing up; this is really nice, helps find unusual events.

The Histogram
In the next graph you see an overview of deployments per day. (click to enlarge)

This is more of a holistic view of how things went the last couple of days, it just shows how many deployments took place each day (counts production clusters only) and colors the successful ones in green and the failed ones in red.

This graph is like an executive summary that can tell the story of – in case there are too many reds (or there are reds at all), then someone needs to take that seriously and figure out what needs to be fixed (usually that someone is me…) – or in case the bars aren’t high enough, then someone needs to kick developer’s buts and get them deploying somethin already…

Like many other graphs from Google’s library (this one’s a Stacked Column Chart, BTW), it shows nice tooltips when hovering over any of the columns with their x values (the date) and their y value (number of successful/failed deployments)

Versions DNA Mapping
The following graph shows the current variety of versions that we have in our production systems for each and every module. It was attributed as a DNA mapping by one of our developers b/c of the similarity in how they look but that’s how far this similarity goes…

The x axis lists the different modules that we have (names were intentionally left out, but you can imaging having www and other folks there). The y axis shows the svn versions of them in production. It uses glu’s live model as reported by glu’s agents to zookeeper.

Let’s zoom in a bit:

What this diagram tells us is that the module www has versions starting from 41268 up to 41463 in production. This is normal as we don’t necessarily deploy everything to all servers at once, but this graph helps us easily find hosts that are left behind for too long, so for example if one of the modules had not been deployed in a while then you’d see it falling behind low on the graph. Similarly, if a module has a large variability in versions in production, chances are that you want to close that gap pretty soon. The following graph illustrates both cases:

To implement this graph I used a crippled version of the Candle Stick Chart, which is normally used for showing stock values; it’s not ideal for this use case but it’s the closest I could find.

That’s all, three charts is enough for now and there are other news regarding our evolving deployment system, but they are not as visual; if you have any questions or suggestions for other types of graphs that could be useful don’t be shy to comment or tweet (@rantav).

Posted in Dev Methods, IT/Ops| No Comments

Leader Election with Zookeeper

Jul 10, 2011 at 8:19 AM by Erez Mazor | 2 Comments

Recently we had to implement an active-passive redundancy of a singleton service in our production environment where the general rule is always have “more than one of anything”. The main motivation is to alleviate the need to manually monitor and manage these services, whose presence is crucial to the overall health of the site.

This means that we sometime have a service installed on several machines for redundancy, but only one of the is active at any given moment. If the active services goes down for some reason, another service rises to do its work. This is actually called leader election. One of the most prominent open source implementation facilitating the process of leader election is Zookeeper. So what is Zookeeper?

Originally developed by Yahoo reasearch, Zookeepr acts as a service providing reliable distributed coordination. It is highly concurrent, very fast and suitable mainly for read-heavy access patterns. Reads can be done against any node of a Zookeeper cluster while writes a quorum-based. To reach a quorum, Zookeeper utilizes an atomic broadcast protocol. So how does it work?

(more…)

Posted in Dev Methods, Uncategorized, leader election, spring, zookeeper| 2 Comments

Feature Flags Made Easy

Jul 5, 2011 at 8:20 AM by Eran Harel | 4 Comments

I recently participated in the ILTechTalk week. Most of the talks discussed issues like Scalability, Software Quality, Company Culture, and Continuous Deployment (CD). Since the talks were hosted at Outbrain, we got many direct questions about our concrete implementations. Some of the questions and statements claimed that Feature Flags complicate your code. What bothered most participants was that committing code directly to trunk requires addition of feature flags in some cases and that it may make their code base more complex.

While in some cases, feature flags may make the code slightly more complicated, it shouldn’t be so in most cases. The main idea I’m presenting here is that conditional logic can be easily replaced with polymorphic code. In fact, conditional logic can always be replaced by polymorphism.

Enough with the abstract talk…

Suppose we have an application that contains some imaginary feature, and we want to introduce a feature flag. Below is a code snippet that developers normally come up with:

  public void runApplication() {
 
    // ...
    if (useNewImplementation) {
      executeNewImaginaryFeatureImplementation();
    } else {
      executeOldImaginaryFeatureImplementation();
    }
    // ...
  }

While this is a legitimate implementations in some cases, it does complicate your code base by increasing the cyclomatic complexity of your code. In some cases, the test for activation of the feature may recur in many place in the code, so this approach can quickly turn into a maintenance nightmare.

Luckily, implementing a feature flag using polymorphism is pretty easy. First, let’s define an interface for the imaginary feature and two implementations (old and new):

public interface ImaginaryFeature {
  public void executeFeature();
}
 
class OldImaginaryFeature implements ImaginaryFeature {
  @Override
  public void executeFeature() {
    System.out.println("old feature implementation");
  }
}
 
class NewImaginaryFeature implements ImaginaryFeature {
  @Override
  public void executeFeature() {
    System.out.println("new feature implementation");
  }
}

Now, let’s use the feature in our application, selecting the implementation at runtime:

public class PolymorphicApplication {
  
  private final ImaginaryFeature imaginaryFeature;
  
  public PolymorphicApplication() {
    this.imaginaryFeature = createImaginaryFeature();
  }
 
  private ImaginaryFeature createImaginaryFeature() {
    final String featureClass = System.getProperty("PolymorphicApplication.imaginaryFeature.class");
    try {
      return (ImaginaryFeature) Class.forName(featureClass).newInstance();
    } catch (final Exception e) {
      throw new IllegalStateException("Failed to create ImaginaryFeature of class " + featureClass, e);
    }
  }
 
  public void runApplication() {
 
    // ...
    imaginaryFeature.executeFeature();
    // ...
  }
}

Here, we initialized the imaginary feature member by reflection, using a class name specified as a system property. The createImaginaryFeature() method above is usually abstracted into a factory but kept as is here for brevity. But we’re still not done. Most of the readers would probably say that the introduction of a factory and reflection makes the code less readable and less maintainable. I have to agree — and apart from that, adding dependencies to the concrete implementations will complicate the code even more. Luckily, I have a secret weapon at my disposal. It is called IoC, (or DI). When using an IoC container such as Spring or Guice, your code can be made extremely flexible, and implementing feature flags becomes a walk in the park.

Below is a rewrite of the PolymorphicApplication using Spring dependency injection:

public class SpringPolymorphicApplication {
 
  private final ImaginaryFeature imaginaryFeature;
 
  public SpringPolymorphicApplication(final ImaginaryFeature imaginaryFeature) {
    this.imaginaryFeature = imaginaryFeature;
  }
 
  public void runApplication() {
 
    // ...
    imaginaryFeature.executeFeature();
    // ...
  }
}

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd">
 
  <bean class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
    <property name="systemPropertiesModeName" value="SYSTEM_PROPERTIES_MODE_OVERRIDE"/>
    <property name="properties">
      <map>
        <entry key="imaginaryFeature.implementation.bean" value="oldImaginaryFeature"/>
      </map>
    </property>  
  </bean>
 
  <bean id="application" class="com.eranharel.SpringPolymorphicApplication">
    <constructor-arg ref="imaginaryFeature"/>
  </bean>
  
  <alias name="${imaginaryFeature.implementation.bean}" alias="imaginaryFeature"/>
  
  <bean id="newImaginaryFeature" class="com.eranharel.NewImaginaryFeature" lazy-init="true"/>
  
  <bean id="oldImaginaryFeature" class="com.eranharel.OldImaginaryFeature" lazy-init="true"/>
</beans>

The spring code above defines an application and 2 imaginary feature implementations. By default, the application is initialized with the oldImaginaryFeature, but this behavior can be overridden by specifying a -DimaginaryFeature.implementation.bean=newImaginaryFeature command line argument. Only a single feature implementation will be initialized by Spring, and the implementations may have dependencies.

Bottom line is: with a bit of extra preparation and correct design decisions, feature flags shouldn’t be a burden on your code base. By extra preparation, I mean extracting interfaces for your domain objects, using an IoC container, etc, which is something we should be doing in most cases anyway.

Eran Harel is a Senior Software Developer at Outbrain.

Posted in Dev Methods, design, Feature-Flags, Polymorphism, spring| 4 Comments

Slideshow – Continuous Deployment in Outbrain

Apr 14, 2011 at 8:27 PM by Ori Lahav | No Comments

Itai, our head of R&D gave a presentation this week about Continuous Deployment and how we actually do it.
Here is is:

Enjoy!!!

Posted in Dev Methods| No Comments