[iOS] UI Test 간단하게 사용해보기

안녕하세요 Foma👟 입니다!

 

저번 포스팅엔 Unit Test에 대해서 다뤘는데요

 

오늘은 UI를 테스트 할 수 있는 UI Test에 대해서 정리를 해보려고 합니다

 

바로 시작할게요~

---

UITest Bundle 만들기

 

Project - General 탭으로 이동하셔서 왼쪽 하단 부분에 +버튼을 눌러주세요.

 

 

그리곤 ui를 검색하고 UI Testing Bundle을 만들어주세요.

 

---

Storyboard

 

아래와 같이 회원가입 하는 뷰컨트롤러를 구성할건데요.

 

이메일 텍스트필드,비밀번호 텍스트필드,비밀번호 확인 텍스트필드,회원가입 버튼으로 구성해주었습니다.

 

---

SignupViewController

 

IBOutlet을 모두 연결시켜주고

 

signupButton을 눌렀을 때 비밀번호와 확인 비밀번호가 다르다면 경고창을 띄우도록 하였습니다.

 

  @IBOutlet weak var signupButton: UIButton!
  @IBOutlet weak var repeatTF: UITextField!
  @IBOutlet weak var passwordTF: UITextField!
  @IBOutlet weak var emailTF: UITextField!
  
    @IBAction func tapSignupButton(_ sender: Any) {        
        if passwordTF.text != repeatTF.text {
            let alert = UIAlertController(title: "Error", message:"비밀번호와 확인 비밀번호가 다릅니다", preferredStyle: .alert)
            alert.addAction(UIAlertAction(title: "OK", style: .default, handler: nil))
            DispatchQueue.main.async {
                //테스트를 위해 accessibilityIdentifier를 정해줘야함
                alert.view.accessibilityIdentifier = "errorAlertDialog"
                self.present(alert, animated: true, completion: nil)
            }
        }
    }

---

UITests

 

UI Test Case Classs를 생성해주시고 

 

이름은 SignupFlowUITests로 짓겠습니다.

 

 

생성 시 반드시 UITests를 체크해주세요.

 

 

아래와 같이 화면에 있는 모든 요소들을 세팅해줍니다.

 

class SignupFlowUITests: XCTestCase {
    
    private var app:XCUIApplication!
    private var emailTF:XCUIElement!
    private var passwordTF:XCUIElement!
    private var repeatPasswordTF:XCUIElement!
    private var signupButton:XCUIElement!

 

그리곤 setupWithError 메소드에 모든 요소들의 값을 넣어줄건데요.

 

여기서 app.textFields[identifier] 부분은 identifier를 정해줍니다.

 

override func setUpWithError() throws {
        try super.setUpWithError()
        continueAfterFailure = false
        
        app = XCUIApplication()
        app.launch()
        
        emailTF = app.textFields["emailTF"]
        passwordTF = app.textFields["passwordTF"]
        repeatPasswordTF = app.textFields["repeatPasswordTF"]
        signupButton = app.buttons["signupButton"]
        
    }

 

element의 identifier를 정하는 방법은 우선 스토리보드로 이동하신 뒤

 

오른쪽 4번째 탭을 클릭하시고 아래로 내리면

 

아래와 같이 Accessibility가 있을거에요.

 

여기서 Identifier를 정해줍니다.

 

 

Identifier를 정하지 않고 하려면 

 

UITests 파일의 오른쪽 하단을 보면 빨간색 동그라미 버튼이 있을거에요.

 

 

이걸 클릭하시면 시뮬레이터가 뜰건데

 

여기서 원하시는 엘리먼트를 클릭하면 아래와 같이 플레이스홀더 이름으로 요소가 타이핑되고 어떤 행동을 하였는지도 만들어집니다.

 

  XCUIApplication().textFields["email"].tap()
  XCUIApplication().textFields["Password"].tap()
  XCUIApplication().textFields["Repeat Password"].tap()

 

본격적으로 테스트를 해보겠습니다.

 

저는 비밀번호와 확인 비밀번호가 다르면 경고창을 띄우라고 SignupViewController에서 구현해놓았죠?

 

그래서 비밀번호와 확인 비밀번호가 다르면 경고창을 띄우는지 테스트 해보겠습니다.

 

어떠한 행동을 하라고 명령을 내리고 그에 맞는 결과과 나오는지 확인해줍니다.

 

이메일 텍스트필드를 탭하고 이메일을 입력

 

패스워드 텍스트필드를 탭하고 패스워드를 입력

 

확인 패스워드 텍스트필드를 탭하고 확인 패스워드 입력

 

회원가입 버튼 탭을 한 뒤 경고창이 뜨는지 확인

 

 

    func testSignupViewController_DonotMatchPasswordAndRepeatPassword_PresentErrorAlertDialog() {
        
        //Act
        emailTF.tap()
        emailTF.typeText("fomagran6@naver.com")
        
        passwordTF.tap()
        passwordTF.typeText("12345678")
        
        repeatPasswordTF.tap()
        repeatPasswordTF.typeText("123456")
        
        signupButton.tap()
        
        //Assert
        XCTAssertTrue(app.alerts["errorAlertDialog"].waitForExistence(timeout: 1),"잘못된 정보를 입력하면 경고창이 떠야하는데 안떴어요")
    }

 

cmd + u 를 눌러서 확인해보면 

 

제가 아무것도 하지 않아도 자동으로 타이핑을 하고 자동으로 탭을 하면서 경고창이 뜨는지 안뜨는지 확인합니다.

 

(진짜 너무너무 신기하더라구요...)

 

 

테스트 결과를 확인해보면 패스워드와 확인 패스워드가 다르게 입력됐을 때 경고창이 떴으니 통과가 된걸 볼 수 있습니다.

 

---

오늘은 이렇게 간단하게 UI 테스트를 하는 방법에 대해서 알아보았습니다.

 

UI 테스트는 개발자가 어떠한 흐름을 정해놓고 이것에 맞게 행동하는지 확인하는 테스트인 것 같습니다.

 

어떠한 행동을 정해주고 자동으로 실행하게 한 뒤 결과를 확인하는 과정이 너무 신기하고 편하더라구요.

 

(하지만 테스트를 구현하기까지가 너무 불편하지만...ㅎ)

 

앞으로는 이렇게 흐름을 미리 설계해보고 맞게 행동하는지 테스트해본 뒤 코드를 작성하는 습관을 길러야겠습니다.

 

혹시라도 궁금하신 부분이나 지적해주실 부분이 있다면 댓글로 알려주세요!