章节十四、5- web页面的截图

一、以雅虎网站为例，当我们在登录时，输入错误的用户名然后点击“下一步”，用户名输入框会提示红色字体，这个时候我们就将页面进行截图。

http://commons.apache.org/proper/commons-io/download_io.cgi

 package basicweb;

 import java.io.File;
 import java.util.concurrent.TimeUnit;

 import org.apache.commons.io.FileUtils;
 import org.junit.jupiter.api.AfterEach;
 import org.junit.jupiter.api.BeforeEach;
 import org.junit.jupiter.api.Test;
 import org.openqa.selenium.By;
 import org.openqa.selenium.Keys;
 import org.openqa.selenium.OutputType;
 import org.openqa.selenium.TakesScreenshot;
 import org.openqa.selenium.WebDriver;
 import org.openqa.selenium.WebElement;
 import org.openqa.selenium.chrome.ChromeDriver;

 class Screenshots {

     WebDriver driver;
     String url;
     @BeforeEach
     void setUp() throws Exception {
         driver = new ChromeDriver();
         url = "https://login.yahoo.com/config/login?.src=fpctx&.intl=us&.lang=en-US&.done=https%3A%2F%2Fwww.yahoo.com";
         driver.manage().window().maximize();
         driver.manage().timeouts().implicitlyWait(2000,TimeUnit.SECONDS);
     }

     @Test
     void test() throws InterruptedException {
         driver.get(url);
 //        查找到登录文本框，输入test
         driver.findElement(By.xpath("//input[@name='username']")).sendKeys("test");
 //        点击登录按钮
         driver.findElement(By.xpath("//input[@id='login-signin']")).sendKeys(Keys.ENTER);
     }

 //    创建一个获取随机字符串的方法用来给截图的内容图片赋值
 //    在调用该方法时，列如length赋值是5，那么文件名的长度就为5，由5个字符组成
     public static String getRandomString(int length) {
 //        StringBuilder 是一个可变的字符序列
         StringBuilder sb = new StringBuilder();
         String characters = "qwertyuiopasdfghjklzxcvbnmQWERTYUIOPAZSXDCFVGBHNJMKL1234567890";
 //        for循环从定义的characters字符串中随机取出指定length长度的字符串
         for(int i = 0; i<length;i++) {
 //            Math.random()取0到1之间的一个随机数然后乘以characters字符串的长度，得到一个double类型的数据，因此要强制转换成int类型得到一个整数，成为characters字符串的索引
             int index = (int)(Math.random() * characters.length());
 //            通过charAt获得字符串上索引的值，来作为append方法的参数
 //            append方法是为了把获取到的字符全部连接到一起，先取一个字符放到bulider缓存区中，然后再循环追加取剩下的值，直到满足length长度
             sb.append(characters.charAt(index));
             }
 //        然后将取到的字符串值返回
         return sb.toString();
     }

     @AfterEach
     void tearDown() throws Exception {
     Thread.sleep(2000);
 //    截图首先需要一个文件名,调用上面定义的随机生成文件名的方法,.png表示文件的扩展名
     String fileName = getRandomString(10)+".png";
 //    存放图片的路径
     String directory = "C:\\Users\\acer\\Desktop\\";
 //    以文件的形式输出
 //    把driver转换为TakesScreenshot类型
     File sourceFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
 //    复制文件
     FileUtils.copyFile(sourceFile,new File(directory+fileName));
     driver.quit();
     }
 }

运行结果：成功截图且截图结果与预期结果一致

注意：（在实现截图功能的过程中遇到一个问题浪费了我一下午的时间）

雅虎用户名输入框在输入错误的用户名或者为空的情况下点击登录按钮，用户名输入框会出现红色的提示性文字。

一开始我使用的是click来进行点击，但始终未成功，

driver.findElement(By.xpath("//input[@id='login-signin']")).click();

然后我就想是不是定位有问题、farme标签等等情况导致我定位不成功，在查询资料时发现因为各个网站功能实现方式有差异，所以导致click对有些input标签不生效，而登录按钮正是input标签，于是我改用sendkeys发生Enter按键操作来实现，成功，nice。（需要导包keys包）

driver.findElement(By.xpath("//input[@id='login-signin']")).sendKeys(Keys.ENTER);

如果有不明白的小伙伴可以加群“555191854”问我，群里都是软件行业的小伙伴相互一起学习。