网站layout的automation

研究这个问题的原因，是因为在我们site上，有很多的google ads，对于每个ads的显示位置有严格的requirement。为此，我也吃了几个priority比较高的ticket。

GALEN（http://galenframework.com/）就是这样一个framework，不得不说还是很好用的，也很方便。

首先在pom文件中加入galen dependency

     <dependency>
        <groupId>net.mindengine</groupId>
        <artifactId>galen</artifactId>
        <version>1.4.9</version>
     </dependency>

然后定义element的位置： SRP.spec

@@ import Header.spec

============================================================================================
srp-skyscraper-banner xpath        //iframe[@id='google_ads_iframe_/7917/srp_0']
srp-bottom-banner1    xpath        //iframe[@id='google_ads_iframe_/7917/srp_2']
# srp-bottom-banner2    xpath        //iframe[@id='google_ads_iframe_/7917/srp_3']

srp-featured-ads      xpath        //h3[contains(text(), 'Featured Ads')]
srp-refine-search     xpath        //div[@id='refine-search']//div[@class='module-content']
srp-paging-bar        xpath        //div[@class='rs-paginator c-margin-vertical1']
srp-user-activity     xpath        //div[@id='user-activity']

==============================================================================================
    
@ desktop, tablet-l
srp-skyscraper-banner
    width: 160 px
    height: 600 px
    below: srp-featured-ads 20 to 130 px
    inside: srp-refine-search 20 to 30 px right

@ desktop, tablet-l, tablet-p
srp-bottom-banner1
    width: 728 px
    height: 90 px
    below: srp-paging-bar 10 to 20 px
    above: srp-user-activity 20 to 30 px

# @ ^
# srp-bottom-banner2
#    width: 728 px
#   height: 90 px
#   below: srp-user-activity 20 to 30 px
    

@ mobile
srp-bottom-banner1
    width: 320 px
    height: 50 px
    below: srp-paging-bar 10 to 20 px
    above: srp-user-activity 20 to 30 px

#@ ^
#srp-bottom-banner2
#    width: 320 px
#    height: 50 px
#   below: srp-user-activity 20 to 30 px

最后code：

        @Then("I should see the banners on '$page' rendered on '$device' '$orientation' orientation")
	public void checkBannersOnHpOnTabletOrMobile(@Named("$page") String page, 
			@Named("$device") String device,
			@Named("$orientation") String orientation) throws Exception{
		
		Dimension dimension = DeviceSizes.getDeviceDimension(device, orientation);
		WebDriver driver = getWebDriver(page, dimension);
		
		String tag = DeviceSizes.getTag(device, orientation);
		
		LayoutReport layoutReport = 
	            Galen.checkLayout(driver, "src/main/resources/spec/" + page + ".spec", 
	            Arrays.asList(tag), null, null, null);
		
		// Creating a list of tests
        List<GalenTestInfo> tests = new LinkedList<GalenTestInfo>();

        // Creating an object that will contain the information about the test
        GalenTestInfo test = GalenTestInfo.fromString(device + "_" + orientation);

        // Adding layout report to the test report
        test.getReport().layout(layoutReport, "check layout on " + device + " " + orientation +" orientation");
        tests.add(test);


        // Exporting all test reports to html
        new HtmlReportBuilder().build(tests, "target/galen-html-reports");

	   if (layoutReport.errors() > 0) {
	        StringBuffer sb = new StringBuffer();
	        List<ValidationError> errorList = layoutReport.getValidationErrors();
	        Iterator<ValidationError> errorListIt = errorList.iterator();
	        	
	        while(errorListIt.hasNext()){
	        	ValidationError error = errorListIt.next();
	        	sb.append(error.toString());
	        }
	        Assertion.assertTrue(false, sb.toString());
	   }
		
	}

这个framework还有很多其他的强大之处，有兴趣的同学可以自己去研究研究。