登录页面Page

页面原型

页面分析

• page对象，核心、核心、核心，一定要传入page对象，一定得记住有传入page对象这回事。
• 用户名输入框
• 密码输入框
• 登录按钮
• 必填提示（用户名和密码）
• 登陆失败提示

代码分析

• 最好不使用xpath语法，而是使用playwright中的属性标签。
• 填充用户名和密码封装成单独的方法
• 点击登录按钮，封装成单独的方法
• 登录流程，将填充用户名和密码操作与点击登录按钮，封装为一个方法
• 清空用户名和密码，填充用户名和密码为空（根据情况进行封装，若依框架默认存在用户名和密码）。
• 导航方法，导航到对应的页面。

from playwright.sync_api import Page


class LoginPage:
    def __init__(self, page: Page):
    	# 必须传入page对象，断言时会用到page页面。
        self.page = page
        # 使用xpath语法获取用户名文本框
        self.locator_username = page.locator("//form[@id='signupForm']/input[@class='form-control uname']")
        # 密码框
        self.locator_password = page.locator("//form[@id='signupForm']/input[@class='form-control pword']")
        # 登录按钮
        self.login_button = page.locator("//button[@id='btnSubmit']")

        # 必填提示
        self.username_tips = page.locator("//label[@id='username-error']")
        self.password_tips = page.locator("//label[@id='password-error']")
		
		# 登录失败提示
        self.login_error_tips = page.get_by_text("用户不存在/密码错误")
        self.login_error_tips2 = page.locator("text=用户不存在/密码错误")
        self.login_error_tips3 = page.locator("//div[@class='layui-layer-content']")

        self.navigate()

    def navigate(self):
        self.page.goto('/login')

    def fill_username(self, username):
        # 必须先点一下才能获取到
        self.locator_username.click()
        self.locator_username.fill(username)

    def fill_password(self, password):
        self.locator_password.click()
        self.locator_password.fill(password)

    def click_login(self):
        self.login_button.click()

    def login_flow(self, username, password):
        self.navigate()
        # 定位用户名
        self.fill_username(username)
        # 定位密码
        self.fill_password(password)
        # 点击登录按钮
        self.click_login()
        # 等待页面跳转，作为登录成功的标准
        # self.page.wait_for_url(url='/index')

    def clean_username_password(self):
        self.fill_password('')
        self.fill_username('')

测试用例

断言必填提示符:to_be_visible()

• 使用expect(page).to_be_visible()：标签属性可见，红色的提示符从隐藏状态变为可见。
• 使用expect(page).to_contain_text()：通过模糊匹配必填提示符文本，进行断言。

import re

import pytest
from playwright.sync_api import Page, expect

from pages.login_page import LoginPage


@pytest.fixture(autouse=True)
def login_page(page):
    yield LoginPage(page)

def test_tips(login_page):
    """
    断言：登陆失败，必填提示词出现
    :param login_page:
    :return:
    """
    login_page.clean_username_password()
    login_page.click_login()
    # 断言
    # 元素从隐藏变为可见
    expect(login_page.username_tips).to_be_visible()
    expect(login_page.password_tips).to_be_visible()
    # 获取可见元素进行模糊匹配
    expect(login_page.username_tips).to_contain_text('用户名')
    expect(login_page.password_tips).to_contain_text('请输入您的密码')
    # 若依登录按钮，可以点击，只是无法生效，该断言报错。
    # expect(login_page.login_button).not_to_be_enabled()


def test_login_error(login_page):
    """
    断言：登陆失败，用户名密码不正确
    :param login_page:
    :return:
    """
    login_page.login_flow('admin123', 'admin2')
    # 文本值可见
    expect(login_page.login_error_tips).to_be_visible()
    expect(login_page.login_error_tips2).to_be_visible()
    expect(login_page.login_error_tips3).to_be_visible()

断言登录成功或页面跳转成功:to_have_title()、to_have_url()

• 使用expect(page).to_have_title()：模糊匹配页面标题内容，进行断言。
• 使用expect(page).to_have_url()：匹配页面url。

def test_login_success(login_page):
    """
    断言：登录成功
        断言title和url
    :param login_page:
    :return:
    """
    login_page.login_flow('admin', 'admin123')
    expect(login_page.page).to_have_title(re.compile('首页'))
    expect(login_page.page).to_have_url('/index')

断言html页面标签属性：to_have_attribute()

• 以a标签href属性为例。
• LoginPage类内init方法，定义属性self.register_a_href = page.get_by_role("link", name="立即注册")，定位a标签位置。
• 使用expect(login_page.register_a_href).to_have_attribute('href', '/register')

def test_login_click_a_href_register(login_page):
    """
    a 标签断言
    :param login_page:
    :return:
    """
    expect(login_page.register_a_href).to_have_attribute('href', '/register')

page接口断言

• 接口断言，一般用在前后端分离的项目，登录按钮触发后端api登录接口，返回json数据后触发前端代码，跳转到前端对应的页面。

断言页面跳转:expect_navigation()

• page.expect_navigation()断言，跳转到的前端地址

def test_login_success2(login_page):
    """
    断言：登录成功，显示断言，通过拆分login_flow，判断重定向页面
        通过断言页面跳转，来判断是否登录成功
        断言title和url
    :param login_page:
    :return:
    """
    login_page.fill_username('admin')
    login_page.fill_password('admin123')
    with login_page.page.expect_navigation(url='**/index'):
        login_page.click_login()

断言接口请求:expect_request()

• page.expect_request()断言，后端请求接口地址

def test_login_success4(login_page):
    """
    ajax 断言 request 请求
    断言：登录成功，
        通过request请求
    :param login_page:
    :return:
    """
    login_page.fill_username('admin')
    login_page.fill_password('admin123')
    with login_page.page.expect_request('**/login') as req:
        login_page.click_login()
    assert req.value.method == 'POST', '请求方法不为POST'
    assert req.value.headers['x-requested-with'] == 'XMLHttpRequest', '请求协议不为XMLHttpRequest'
    assert req.value.post_data_json['password'] == 'admin123', '密码不为admin123'

• req.value对象的值

    print(req.value)
    <Request url='http://xx.xx.xx.xx/login' method='POST'>

    print(req.value.headers) 
    {'referer': 'http://xx.xx.xx.xx/login', 'x-requested-with': 'XMLHttpRequest','user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36', 'accept': '*/*', 'content-type':'application/x-www-form-urlencoded;charset=UTF-8'}

    print(req.value.method)
    POST

    print(req.value.post_data)
    username=admin&password=admin123&rememberMe=false

    print(req.value.post_data_json)
    {'username': 'admin', 'password': 'admin123', 'rememberMe': 'false'}

    print(req.value.post_data_buffer)
    b'username=admin&password=admin123&rememberMe=false'

断言接口响应:page.expect_response()

• page.expect_response()断言，根据接口请求响应，断言状态码等

def test_login_success5(login_page):
    """
    ajax 断言 响应 response
    断言：登录成功，显示断言，
        断言response 返回
    :param login_page:
    :return:a
    """
    login_page.fill_username('admin')
    login_page.fill_password('admin123')
    with login_page.page.expect_response('**/login') as res:
        login_page.click_login()

    assert res.value.status == 200
    assert res.value.url.__contains__('login')
    assert res.value.headers['content-type'] == 'application/json'
    assert res.value.ok.__eq__(True)

• response.value对象的值

    print(res.value)
    print(res.value.status)
    # 200

    print(res.value.url)
    # http://xx.xx.xx.xx/login

    print(res.value.ok)
    # True

    print(res.value.headers)
    # {'transfer-encoding': 'chunked', 'keep-alive': 'timeout=60', 'date': 'Sun, 30 Mar 2025 06:04:44 GMT', 
    # 'content-type': 'application/json', 'connection': 'keep-alive'} 

• 重点
• .json()、.text()、.body()：他们都是获取当前页面page的信息，但是我们登录成功后，会重定向到/index页面，因此获取不到该字段信息
• 他们需要用在专门的后端接口。

    # .json()、.text()、.body()：他们都是获取当前页面page的信息，但是我们登录成功后，会重定向到/index页面，因此获取不到该字段信息
    # print(res.value.json())
    # print(res.value.text())
    # print(res.value.body())

参数化

• playwright中使用参数化与pytest中基本一致
• 注意：参数化时，最好正例在一起，反例在一起，正例反例不要混在一起写

@pytest.mark.parametrize('username, password', [
    ('admin', 'admin123'),
    ('test_0001', 'admin123')
])
def test_login_success5(login_page, username, password):
    """
    ajax 断言 响应 response
    断言：登录成功，显示断言，
        断言response 返回
    :param login_page:
    :return:a
    """
    login_page.fill_username(username)
    login_page.fill_password(password)
    with login_page.page.expect_response('**/login') as res:
        login_page.click_login()
    assert res.value.status == 200
    assert res.value.url.__contains__('login')
    assert res.value.headers['content-type'] == 'application/json'
    assert res.value.ok.__eq__(True)