View: frontend/tests/sign-up.spec.ts — full-stack-fastapi-template

1

import { expect, type Page, test } from "@playwright/test"

2

3

import { randomEmail, randomPassword } from "./utils/random"

4

5

test.use({ storageState: { cookies: [], origins: [] } })

6

7

const fillForm = async (

8

  page: Page,

9

  full_name: string,

10

  email: string,

11

  password: string,

12

  confirm_password: string,

13

) => {

14

  await page.getByTestId("full-name-input").fill(full_name)

15

  await page.getByTestId("email-input").fill(email)

16

  await page.getByTestId("password-input").fill(password)

17

  await page.getByTestId("confirm-password-input").fill(confirm_password)

18

19

20

const verifyInput = async (page: Page, testId: string) => {

21

  const input = page.getByTestId(testId)

22

  await expect(input).toBeVisible()

23

  await expect(input).toHaveText("")

24

  await expect(input).toBeEditable()

25

26

27

test("Inputs are visible, empty and editable", async ({ page }) => {

28

  await page.goto("/signup")

29

30

  await verifyInput(page, "full-name-input")

31

  await verifyInput(page, "email-input")

32

  await verifyInput(page, "password-input")

33

  await verifyInput(page, "confirm-password-input")

34

})

35

36

test("Sign Up button is visible", async ({ page }) => {

37

  await page.goto("/signup")

38

39

  await expect(page.getByRole("button", { name: "Sign Up" })).toBeVisible()

40

})

41

42

test("Log In link is visible", async ({ page }) => {

43

  await page.goto("/signup")

44

45

  await expect(page.getByRole("link", { name: "Log In" })).toBeVisible()

46

})

47

48

test("Sign up with valid name, email, and password", async ({ page }) => {

49

  const full_name = "Test User"

50

  const email = randomEmail()

51

  const password = randomPassword()

52

53

  await page.goto("/signup")

54

  await fillForm(page, full_name, email, password, password)

55

  await page.getByRole("button", { name: "Sign Up" }).click()

56

})

57

58

test("Sign up with invalid email", async ({ page }) => {

59

  await page.goto("/signup")

60

61

  await fillForm(

62

    page,

63

    "Playwright Test",

64

    "invalid-email",

65

    "changethis",

66

    "changethis",

67

68

  await page.getByRole("button", { name: "Sign Up" }).click()

69

70

  await expect(page.getByText("Invalid email address")).toBeVisible()

71

})

72

73

test("Sign up with existing email", async ({ page }) => {

74

  const fullName = "Test User"

75

  const email = randomEmail()

76

  const password = randomPassword()

77

78

  await page.goto("/signup")

79

80

  await fillForm(page, fullName, email, password, password)

81

  await page.getByRole("button", { name: "Sign Up" }).click()

82

83

  await page.goto("/signup")

84

85

  await fillForm(page, fullName, email, password, password)

86

  await page.getByRole("button", { name: "Sign Up" }).click()

87

88

  await page

89

    .getByText("The user with this email already exists in the system")

90

    .click()

91

})

92

93

test("Sign up with weak password", async ({ page }) => {

94

  const fullName = "Test User"

95

  const email = randomEmail()

96

  const password = "weak"

97

98

  await page.goto("/signup")

99

100

  await fillForm(page, fullName, email, password, password)

101

  await page.getByRole("button", { name: "Sign Up" }).click()

102

103

  await expect(

104

    page.getByText("Password must be at least 8 characters"),

105

  ).toBeVisible()

106

})

107

108

test("Sign up with mismatched passwords", async ({ page }) => {

109

  const fullName = "Test User"

110

  const email = randomEmail()

111

  const password = randomPassword()

112

  const password2 = randomPassword()

113

114

  await page.goto("/signup")

115

116

  await fillForm(page, fullName, email, password, password2)

117

  await page.getByRole("button", { name: "Sign Up" }).click()

118

119

  await expect(page.getByText("The passwords don't match")).toBeVisible()

120

})

121

122

test("Sign up with missing full name", async ({ page }) => {

123

  const fullName = ""

124

  const email = randomEmail()

125

  const password = randomPassword()

126

127

  await page.goto("/signup")

128

129

  await fillForm(page, fullName, email, password, password)

130

  await page.getByRole("button", { name: "Sign Up" }).click()

131

132

  await expect(page.getByText("Full Name is required")).toBeVisible()

133

})

134

135

test("Sign up with missing email", async ({ page }) => {

136

  const fullName = "Test User"

137

  const email = ""

138

  const password = randomPassword()

139

140

  await page.goto("/signup")

141

142

  await fillForm(page, fullName, email, password, password)

143

  await page.getByRole("button", { name: "Sign Up" }).click()

144

145

  await expect(page.getByText("Invalid email address")).toBeVisible()

146

})

147

148

test("Sign up with missing password", async ({ page }) => {

149

  const fullName = ""

150

  const email = randomEmail()

151

  const password = ""

152

153

  await page.goto("/signup")

154

155

  await fillForm(page, fullName, email, password, password)

156

  await page.getByRole("button", { name: "Sign Up" }).click()

157

158

  await expect(page.getByText("Password is required")).toBeVisible()

159

})

160

1	import { expect, type Page, test } from "@playwright/test"
2
3	import { randomEmail, randomPassword } from "./utils/random"
4
5	test.use({ storageState: { cookies: [], origins: [] } })
6
7	const fillForm = async (
8	page: Page,
9	full_name: string,
10	email: string,
11	password: string,
12	confirm_password: string,
13	) => {
14	await page.getByTestId("full-name-input").fill(full_name)
15	await page.getByTestId("email-input").fill(email)
16	await page.getByTestId("password-input").fill(password)
17	await page.getByTestId("confirm-password-input").fill(confirm_password)
18	}
19
20	const verifyInput = async (page: Page, testId: string) => {
21	const input = page.getByTestId(testId)
22	await expect(input).toBeVisible()
23	await expect(input).toHaveText("")
24	await expect(input).toBeEditable()
25	}
26
27	test("Inputs are visible, empty and editable", async ({ page }) => {
28	await page.goto("/signup")
29
30	await verifyInput(page, "full-name-input")
31	await verifyInput(page, "email-input")
32	await verifyInput(page, "password-input")
33	await verifyInput(page, "confirm-password-input")
34	})
35
36	test("Sign Up button is visible", async ({ page }) => {
37	await page.goto("/signup")
38
39	await expect(page.getByRole("button", { name: "Sign Up" })).toBeVisible()
40	})
41
42	test("Log In link is visible", async ({ page }) => {
43	await page.goto("/signup")
44
45	await expect(page.getByRole("link", { name: "Log In" })).toBeVisible()
46	})
47
48	test("Sign up with valid name, email, and password", async ({ page }) => {
49	const full_name = "Test User"
50	const email = randomEmail()
51	const password = randomPassword()
52
53	await page.goto("/signup")
54	await fillForm(page, full_name, email, password, password)
55	await page.getByRole("button", { name: "Sign Up" }).click()
56	})
57
58	test("Sign up with invalid email", async ({ page }) => {
59	await page.goto("/signup")
60
61	await fillForm(
62	page,
63	"Playwright Test",
64	"invalid-email",
65	"changethis",
66	"changethis",
67	)
68	await page.getByRole("button", { name: "Sign Up" }).click()
69
70	await expect(page.getByText("Invalid email address")).toBeVisible()
71	})
72
73	test("Sign up with existing email", async ({ page }) => {
74	const fullName = "Test User"
75	const email = randomEmail()
76	const password = randomPassword()
77
78	await page.goto("/signup")
79
80	await fillForm(page, fullName, email, password, password)
81	await page.getByRole("button", { name: "Sign Up" }).click()
82
83	await page.goto("/signup")
84
85	await fillForm(page, fullName, email, password, password)
86	await page.getByRole("button", { name: "Sign Up" }).click()
87
88	await page
89	.getByText("The user with this email already exists in the system")
90	.click()
91	})
92
93	test("Sign up with weak password", async ({ page }) => {
94	const fullName = "Test User"
95	const email = randomEmail()
96	const password = "weak"
97
98	await page.goto("/signup")
99
100	await fillForm(page, fullName, email, password, password)
101	await page.getByRole("button", { name: "Sign Up" }).click()
102
103	await expect(
104	page.getByText("Password must be at least 8 characters"),
105	).toBeVisible()
106	})
107
108	test("Sign up with mismatched passwords", async ({ page }) => {
109	const fullName = "Test User"
110	const email = randomEmail()
111	const password = randomPassword()
112	const password2 = randomPassword()
113
114	await page.goto("/signup")
115
116	await fillForm(page, fullName, email, password, password2)
117	await page.getByRole("button", { name: "Sign Up" }).click()
118
119	await expect(page.getByText("The passwords don't match")).toBeVisible()
120	})
121
122	test("Sign up with missing full name", async ({ page }) => {
123	const fullName = ""
124	const email = randomEmail()
125	const password = randomPassword()
126
127	await page.goto("/signup")
128
129	await fillForm(page, fullName, email, password, password)
130	await page.getByRole("button", { name: "Sign Up" }).click()
131
132	await expect(page.getByText("Full Name is required")).toBeVisible()
133	})
134
135	test("Sign up with missing email", async ({ page }) => {
136	const fullName = "Test User"
137	const email = ""
138	const password = randomPassword()
139
140	await page.goto("/signup")
141
142	await fillForm(page, fullName, email, password, password)
143	await page.getByRole("button", { name: "Sign Up" }).click()
144
145	await expect(page.getByText("Invalid email address")).toBeVisible()
146	})
147
148	test("Sign up with missing password", async ({ page }) => {
149	const fullName = ""
150	const email = randomEmail()
151	const password = ""
152
153	await page.goto("/signup")
154
155	await fillForm(page, fullName, email, password, password)
156	await page.getByRole("button", { name: "Sign Up" }).click()
157
158	await expect(page.getByText("Password is required")).toBeVisible()
159	})
160