UI自动化系列之设计模式

Look at the code

在谈设计模式之前，还是要先看看项目的代码，要清楚了解一个项目的代码架构。这里以分析前端为主，暂时不说后端。

1
2
3
4
5
├─app
│  ├─components
│  │  ├─xxxx
│  ├─pages
│  │  ├─login

仔细观察components中每个文件基本就对应系统的一个组件。组件再来组合成page。这里涉及机密，仅放少量代码。

1
2
3
4
5
6
7
8
9
10
const UserLogin = React.lazy(() => import('components/users/UserLogin'));
const ForgetPassword = React.lazy(() => import('components/users/ForgetPassword'));
 return (
    <AuthLayout title="Login" className={cx('login-auth-layout')}>
      <Suspense fallback={null}>
        {current === 'login' && <UserLogin go={setCurrent} />}
        {current === 'forget-password' && <ForgetPassword go={setCurrent} />}
      </Suspense>
    </AuthLayout>
  );

前端设计基本模式都是如上所示的，并不会太过复杂。复杂程度取决于组件的种类以及数量。

UI design pattern

基于现在业界的前端设计模式，我们需要更优雅地设计UI自动化，学习组件化的模式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
├─result
├─scenes
├─case
├─service
│  ├─components
│  │  ├─xxxx
│  ├─pages
│  │  ├─login
├─main



# main为入口，执行指定场景下用例
args = ['--alluredir', allure_dir,'--clean-alluredir',"./scenes/test_scene_login.py", "-s", "--headed"] 
pytest.main(args)

# components 尽可能和项目组件对应，当然也可以按照实际情况更优雅地设计
# 比如我认为弹窗页面就是一个组件。弹窗页面有的多个按钮有的少个按钮，只不过是实例化的时候参数控制的。我们可以全部写在一起
class Front_footer():
    def __init__(self, page:Page, name: typing.Optional[typing.Union[str, typing.Pattern[str]]] = None) -> None:
        self.page = page
        # "team-front-modal-footer"
        self.classname = '//div[contains(@class, "modal-footer")]'
        self.iframe = "iframe[title=\"navigation\"]"
    # 确认按钮
    def confirm(self):
        return Button(self.page).find_by_locator(self.page.frame_locator(self.iframe).locator(self.classname), re.compile(r"OK|确 定|确 认"))
        # return self.page.frame_locator(self.iframe).locator(self.classname).get_by_role("button", name = re.compile(r"OK|确 定"))
     # 取消按钮
    def cancel(self):
        return Button(self.page).find_by_locator(self.page.frame_locator(self.iframe).locator(self.classname), re.compile(r"Cancel|取 消"))
        # return self.page.frame_locator("iframe[title=\"navigation\"]").locator('//div[contains(@class, "modal-footer")]').get_by_role("button", name = re.compile(r"Cancel|取 消"))
    
    # 确定并配置按钮
    def confirm2(self):
        return Button(self.page).find_by_locator(self.page.frame_locator(self.iframe).locator(self.classname), re.compile(r"OK|确定并配置"))


# page下存放页面，需要支持链式调用，支持中英文
class LoginPage(Page):
    def __init__(self, page:Page) -> None:
        self.loginbutton = re.compile(r"Sign In|登录")
        self.username = '用户名 或 电子邮箱地址'
        self.password = '密码'
        self.page = page
    def gotoLoginPage(self):
        self.page.goto(config["url"])
        self.page.wait_for_load_state('networkidle')
        return self
    def login(self,yourname, yourpassword):
        Input(self.page, self.username).find_by_placeholder().fill(yourname)
        Input(self.page, self.password).find_by_placeholder().fill(yourpassword)
        Button(self.page).find_by_role(self.loginbutton).click()
        self.page.wait_for_load_state("networkidle")
        return self


# case下组件用例，比如包含登录成功，登录失败；断言也可以写在这里
# scenes下放置需要测试的场景，比如登录成功，打开设置页面。那么拿两个用例组装起来即可
#

以上，暂且至此。更多思考留待后续发掘。