Selenium 웹에서 모바일 환경 테스트, 모바일 에뮬레이터

웹 브라우저에서도 모바일 환경처럼 테스트를 진행할 수 있다. 개발자도구에는 다양한 기능이 탑재되어 있다. 실제 단말 없이도 브라우저에서 스마트폰 단말의 환경을 테스트해 볼 수 있다. 물론 앱 형태의 서비스라면 이 방법으로는 불가능하다. 웹 형태의 서비스에서는 적용해 볼 수 있다.

 

 

모바일 에뮬레이터

 

 

 

Chrome에서 모바일 애뮬레이션 사용

모바일 웹 애플리케이션을 테스트를 위한 모바일 애뮬레이션 사용법

F12로 개발자 도구를 켠다. 개발자 도구 좌측 상단의 모바일기기 아이콘을 클릭한다.

모바일 에뮬레이터 버튼

 

상단의 옵션들을 변경해보면서 테스트할 수 있다. 이 기능을 사용하면 개발자와 테스터는 실제 기기 없이도 모바일 기기에서 웹사이트가 어떻게 보이는지 확인 가능하다.

 

 

 

 

셀레니움에서 모바일 에뮬레이터 환경 테스트

ChromeOptions 설정으로 셀레니움 웹드라이버 테스트에서도 모바일 에뮬레이션 기능을 사용할 수 있다. 아래는 검색 예제 테스트를 구글 픽셀2에서 실행하도록 하는 코드이다.

 

package com.example;

import org.testng.annotations.Test;
import org.testng.annotations.BeforeMethod;
import org.testng.annotations.AfterMethod;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;

import static org.assertj.core.api.AssertionsForClassTypes.assertThat;

import java.util.HashMap;
import java.util.Map;

public class ChromeHeadlessTest {
	
	WebDriver driver;
	
  @Test
  public void f() {
	  //테스트할 코드
	  
  }
  @BeforeMethod
  public void beforeMethod() {
	  System.setProperty("webdriver.chrome.driver", "./src/test/resources/drivers/chromedriver");
	  
	  
	  // 너비와 높이 같은 기기 정보를 설정한다. 
	  Map<String, Object> deviceMetrics = new HashMap<>();
	  deviceMetrics.put("width", 411);
	  deviceMetrics.put("heght", 823);
	  deviceMetrics.put("pixelRatio", 3.0);
	  
	  Map<String, Object> mobileEmulation = new HashMap<>();
	  mobileEmulation.put("deviceMetrics", deviceMetrics);
	  mobileEmulation.put("userAgent", "Mozilla/5.0 (Linux; Android 8.0.0;" +
	  "Pixel 2 XL Build/OPD1.170816.004) AppleWebKit/537.36 (KHTML, like Gecko) " +
			  "Chrome/67.0.3396.99 Mobile Safari/537.36");
	  
	  
	  
	  ChromeOptions chromeOptions = new ChromeOptions();
	  chromeOptions.setExperimentalOption("mobileEmulation", mobileEmulation);
	  
	  driver = new ChromeDriver(chromeOptions);
	  
	  driver.get("http://www.naver.com/");
  }

  @AfterMethod
  public void afterMethod() {
	 driver.quit();
 
  }
}

 

네이버홈을 모바일 애뮬레이터로 진입하니 모바일url로 연결된다. (m.naver.com)

그래서 다시 엘리먼트id를 구해줘야 한다. 또, 네이버모바일은 검색창을 한번 클릭한 다음에 검색이 가능하다. 이런 부분들에 맞춰 스크립트는 다시 작성해주어야 한다.

 

 

 

개발자 도구 > Network 탭에서 원하는 모바일 기기의 userAgent 문자열을 확인할 수 있다. 아래는 아이폰12pro이다.

모바일 기기 userAgent