template.py 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534
  1. import asyncio
  2. import json
  3. import os
  4. import re
  5. import threading
  6. from functools import partial
  7. from os import path
  8. import time
  9. from percy import percySnapshot
  10. from selenium.webdriver import Chrome
  11. from selenium.webdriver.support.ui import Select
  12. from pywebio.input import *
  13. from pywebio.output import *
  14. from pywebio.session import *
  15. here_dir = path.dirname(path.abspath(__file__))
  16. def get_visible_form(browser):
  17. forms = browser.find_elements_by_css_selector('#input-container > div')
  18. for f in forms:
  19. if f.is_displayed():
  20. return f
  21. def basic_output():
  22. set_anchor('top')
  23. for i in range(3):
  24. put_text('text_%s' % i)
  25. put_text('测试空格:20空格:[%s]结束' % (' ' * 20))
  26. for i in range(3):
  27. put_text('inline_text_%s' % i, inline=True)
  28. put_markdown("""### put_markdown 测试
  29. `行内代码`
  30. 无序列表:
  31. - 北京
  32. - 上海
  33. - 天津
  34. 有序列表:
  35. 1. 北京
  36. 2. 上海
  37. 3. 天津
  38. [链接](./#)
  39. ~~删除线~~
  40. """, lstrip=True, anchor='put_markdown')
  41. put_text('<hr/>:')
  42. put_html("<hr/>", anchor='put_html')
  43. put_text('table:')
  44. put_table([
  45. ['Name', 'Gender', 'Address'],
  46. ['Wang', 'M', 'China'],
  47. ['Liu', 'W', 'America'],
  48. ])
  49. put_table([
  50. ['Wang', 'M', 'China'],
  51. ['Liu', 'W', 'America'],
  52. ], header=['Name', 'Gender', 'Address'])
  53. put_table([
  54. {"Course": "OS", "Score": "80"},
  55. {"Course": "DB", "Score": "93"},
  56. ], header=["Course", "Score"], anchor='put_table')
  57. put_text('code:')
  58. put_code(json.dumps(dict(name='pywebio', author='wangweimin'), indent=4), 'json', anchor='scroll_basis')
  59. put_text('move ⬆ code block to screen ... :')
  60. put_buttons(buttons=[
  61. ('BOTTOM', BOTTOM),
  62. ('TOP', TOP),
  63. ('MIDDLE', MIDDLE),
  64. ], onclick=lambda pos: scroll_to('scroll_basis', pos), anchor='scroll_basis_btns')
  65. def edit_row(choice, row):
  66. put_text("You click %s button at row %s" % (choice, row), after='table_cell_buttons')
  67. put_table([
  68. ['Idx', 'Actions'],
  69. ['1', table_cell_buttons(['edit', 'delete'], onclick=partial(edit_row, row=1))],
  70. ['2', table_cell_buttons(['edit', 'delete'], onclick=partial(edit_row, row=2))],
  71. ['3', table_cell_buttons(['edit', 'delete'], onclick=partial(edit_row, row=3))],
  72. ], anchor='table_cell_buttons')
  73. put_buttons(['A', 'B', 'C'], onclick=partial(put_text, after='put_buttons'), anchor='put_buttons')
  74. img_data = open(path.join(here_dir, 'assets', 'img.png'), 'rb').read()
  75. put_image(img_data, anchor='put_image1')
  76. put_image(img_data, width="30px", anchor='put_image2')
  77. put_image(img_data, height="50px", anchor='put_image3')
  78. put_file('hello_word.txt', b'hello word!', anchor='put_file')
  79. put_markdown('### 锚点')
  80. put_text('anchor A1', anchor='A1')
  81. put_text('new anchor A1', anchor='A1')
  82. put_text('anchor A2', anchor='A2')
  83. put_text('anchor A3', anchor='A3')
  84. put_text('after=A1', after='A1')
  85. put_text('after=A2', after='A2')
  86. put_text('before=A1', before='A1')
  87. put_text('before=A3', before='A3')
  88. put_text('after=A3', after='A3')
  89. clear_range('A1', "A2")
  90. clear_range('A3', 'A2')
  91. clear_after('A3')
  92. put_text('before=top', before='top')
  93. clear_before('top')
  94. put_text('before=top again', before='top')
  95. put_text('to remove', anchor='to_remove')
  96. remove('to_remove')
  97. session_info = get_info()
  98. put_markdown(rf"""### 会话信息
  99. ```
  100. * `user_agent`:
  101. * `is_mobile` (bool): {session_info.user_agent.is_mobile}
  102. * `is_tablet` (bool): {session_info.user_agent.is_tablet}
  103. * `is_pc` (bool): {session_info.user_agent.is_pc}
  104. * `is_touch_capable` (bool): {session_info.user_agent.is_touch_capable}
  105. * `browser.family` (str): {session_info.user_agent.browser.family}
  106. * `browser.version` (tuple): {session_info.user_agent.browser.version}
  107. * `browser.version_string` (str): {session_info.user_agent.browser.version_string}
  108. * `os.family` (str): {session_info.user_agent.os.family}
  109. * `os.version` (tuple): {session_info.user_agent.os.version}
  110. * `os.version_string` (str): {session_info.user_agent.os.version_string}
  111. * `device.family` (str): {session_info.user_agent.device.family}
  112. * `device.brand` (str): {session_info.user_agent.device.brand}
  113. * `device.model` (str): {session_info.user_agent.device.model}
  114. * `user_language` (str): {session_info.user_language}
  115. * `server_host` (str): {session_info.server_host}
  116. * `origin` (str): {session_info.origin}
  117. ```
  118. """, strip_indent=4)
  119. def background_output():
  120. put_text("Background output", anchor='background')
  121. def background():
  122. for i in range(20):
  123. put_text('%s ' % i, inline=True, after='background')
  124. t = threading.Thread(target=background)
  125. register_thread(t)
  126. t.start()
  127. async def coro_background_output():
  128. put_text("Background output", anchor='background')
  129. async def background():
  130. for i in range(20):
  131. put_text('%s ' % i, inline=True, after='background')
  132. return run_async(background())
  133. def test_output(browser: Chrome, enable_percy=False):
  134. """测试输出::
  135. run template.basic_output()
  136. run template.output_scroll()
  137. template.background_output() # 或者 await template.coro_background_output()
  138. hold()
  139. """
  140. time.sleep(0.5) # 等待输出完毕
  141. # get focus
  142. browser.find_element_by_tag_name('body').click()
  143. time.sleep(0.5)
  144. tab_btns = browser.find_elements_by_css_selector('#pywebio-anchor-table_cell_buttons button')
  145. for btn in tab_btns:
  146. time.sleep(0.5)
  147. browser.execute_script("arguments[0].click();", btn)
  148. btns = browser.find_elements_by_css_selector('#pywebio-anchor-put_buttons button')
  149. for btn in btns:
  150. time.sleep(0.5)
  151. browser.execute_script("arguments[0].click();", btn)
  152. btns = browser.find_elements_by_css_selector('#pywebio-anchor-scroll_basis_btns button')
  153. for btn in btns:
  154. time.sleep(1)
  155. browser.execute_script("arguments[0].click();", btn)
  156. time.sleep(1)
  157. enable_percy and percySnapshot(browser=browser, name='basic output')
  158. def basic_input():
  159. age = yield input("How old are you?", type=NUMBER)
  160. put_markdown(f'`{repr(age)}`')
  161. password = yield input("Input password", type=PASSWORD)
  162. put_markdown(f'`{repr(password)}`')
  163. # 下拉选择框
  164. gift = yield select('Which gift you want?', ['keyboard', 'ipad'])
  165. put_markdown(f'`{repr(gift)}`')
  166. # CheckBox
  167. agree = yield checkbox("用户协议", options=['I agree to terms and conditions'])
  168. put_markdown(f'`{repr(agree)}`')
  169. # Text Area
  170. text = yield textarea('Text Area', rows=3, placeholder='Some text')
  171. put_markdown(f'`{repr(text)}`')
  172. # 文件上传
  173. img = yield file_upload("Select a image:", accept="image/*")
  174. put_image(img['content'], title=img['filename'])
  175. # 输入参数
  176. res = yield input('This is label', type=TEXT, placeholder='This is placeholder,required=True',
  177. help_text='This is help text', required=True)
  178. put_markdown(f'`{repr(res)}`')
  179. # 校验函数
  180. def check_age(p): # 检验函数校验通过时返回None,否则返回错误消息
  181. if p < 10:
  182. return 'Too young!!'
  183. if p > 60:
  184. return 'Too old!!'
  185. age = yield input("How old are you?", type=NUMBER, valid_func=check_age, help_text='age in [10, 60]')
  186. put_markdown(f'`{repr(age)}`')
  187. # Codemirror
  188. code = yield textarea('Code Edit', code={
  189. 'mode': "python", # 编辑区代码语言
  190. 'theme': 'darcula', # 编辑区darcula主题, Visit https://codemirror.net/demo/theme.html#cobalt to get more themes
  191. }, value='import something\n# Write your python code')
  192. put_markdown(f'`{repr(code)}`')
  193. # 输入组
  194. info = yield input_group("Cancelable", [
  195. input('Input your name', name='name'),
  196. input('Input your age', name='age', type=NUMBER, valid_func=check_age, help_text='age in [10, 60]')
  197. ], cancelable=True)
  198. put_markdown(f'`{repr(info)}`')
  199. def check_form(data): # 检验函数校验通过时返回None,否则返回 (input name,错误消息)
  200. if len(data['password']) > 6:
  201. return ('password', 'password太长!')
  202. check_item_data = []
  203. def check_item(data):
  204. check_item_data.append(repr(data))
  205. info = yield input_group('Input group', [
  206. input('Text', type=TEXT, datalist=['data-%s' % i for i in range(10)], name='text',
  207. required=True, help_text='required=True', valid_func=check_item),
  208. input('Number', type=NUMBER, value="42", name='number', valid_func=check_item),
  209. input('Float', type=FLOAT, name='float', valid_func=check_item),
  210. input('Password', type=PASSWORD, name='password', valid_func=check_item),
  211. textarea('Textarea', rows=3, maxlength=20, name='textarea',
  212. help_text='rows=3, maxlength=20', valid_func=check_item),
  213. textarea('Code', name='code', code={
  214. 'lineNumbers': False,
  215. 'indentUnit': 2,
  216. }, value='import something\n# Write your python code', valid_func=check_item),
  217. select('select-multiple', [
  218. {'label': '标签0,selected', 'value': '0', 'selected': True},
  219. {'label': '标签1,disabled', 'value': '1', 'disabled': True},
  220. ('标签2,selected', '2', True),
  221. ('标签3', '3'),
  222. ('标签4,disabled', '4', False, True),
  223. '标签5,selected',
  224. ], name='select-multiple', multiple=True, value=['标签5,selected'], required=True,
  225. help_text='required至少选择一项', valid_func=check_item),
  226. select('select', [
  227. {'label': '标签0', 'value': '0', 'selected': False},
  228. {'label': '标签1,disabled', 'value': '1', 'disabled': True},
  229. ('标签2', '2', False),
  230. ('标签3', '3'),
  231. ('标签4,disabled', '4', False, True),
  232. '标签5,selected',
  233. ], name='select', value=['标签5,selected'], valid_func=check_item),
  234. checkbox('checkbox-inline', [
  235. {'label': '标签0,selected', 'value': '0', 'selected': False},
  236. {'label': '标签1,disabled', 'value': '1', 'disabled': True},
  237. ('标签2,selected', '2', True),
  238. ('标签3', '3'),
  239. ('标签4,disabled', '4', False, True),
  240. '标签5,selected',
  241. ], inline=True, name='checkbox-inline', value=['标签5,selected', '标签0', '标签0,selected'], valid_func=check_item),
  242. checkbox('checkbox', [
  243. {'label': '标签0,selected', 'value': '0', 'selected': True},
  244. {'label': '标签1,disabled', 'value': '1', 'disabled': True},
  245. ('标签2,selected', '2', True),
  246. ('标签3', '3'),
  247. ('标签4,disabled', '4', False, True),
  248. '标签5',
  249. ], name='checkbox', valid_func=check_item),
  250. radio('radio-inline', [
  251. {'label': '标签0', 'value': '0', 'selected': False},
  252. {'label': '标签1,disabled', 'value': '1', 'disabled': True},
  253. ('标签2', '2', False),
  254. ('标签3', '3'),
  255. ('标签4,disabled', '4', False, True),
  256. '标签5,selected',
  257. ], inline=True, name='radio-inline', value='标签5,selected', valid_func=check_item),
  258. radio('radio', [
  259. {'label': '标签0', 'value': '0', 'selected': False},
  260. {'label': '标签1,disabled', 'value': '1', 'disabled': True},
  261. ('标签2', '2', False),
  262. ('标签3', '3'),
  263. ('标签4,disabled', '4', False, True),
  264. '标签5,selected',
  265. ], inline=False, name='radio', value='标签5,selected', valid_func=check_item),
  266. file_upload('file_upload', name='file_upload'),
  267. actions('actions', [
  268. {'label': '提交', 'value': 'submit'},
  269. ('提交2', 'submit2'),
  270. '提交3',
  271. {'label': 'disabled', 'disabled': True},
  272. ('重置', 'reset', 'reset'),
  273. {'label': '取消', 'type': 'cancel'},
  274. ], name='actions', help_text='actions'),
  275. ], valid_func=check_form)
  276. put_text('`valid_func()` log:')
  277. put_code(json.dumps(sorted(list(set(check_item_data))), indent=4, ensure_ascii=False), 'json')
  278. put_text('Form result:')
  279. if info:
  280. put_code(json.dumps([repr(i) for i in sorted(info.items())], indent=4, ensure_ascii=False), 'json')
  281. # yield actions(['Continue'])
  282. def background_input():
  283. def background():
  284. time.sleep(1)
  285. res = input('background')
  286. put_markdown(f'`background: {repr(res)}`')
  287. t = threading.Thread(target=background)
  288. register_thread(t)
  289. t.start()
  290. res = input('front')
  291. put_markdown(f'`front: {repr(res)}`')
  292. async def coro_background_input():
  293. async def background():
  294. await asyncio.sleep(1)
  295. res = await input('background')
  296. put_markdown(f'`background: {repr(res)}`')
  297. run_async(background())
  298. res = await input('front')
  299. put_markdown(f'`front: {repr(res)}`')
  300. async def flask_coro_background_input():
  301. async def background():
  302. await run_asyncio_coroutine(asyncio.sleep(1))
  303. res = await input('background')
  304. put_markdown(f'`background: {repr(res)}`')
  305. run_async(background())
  306. res = await input('front')
  307. put_markdown(f'`front: {repr(res)}`')
  308. def test_input(browser: Chrome, enable_percy=False):
  309. """测试输入::
  310. run template.basic_input()
  311. actions(['Continue'])
  312. template.background_input() # 或者 await template.coro_background_input() / flask_coro_background_input
  313. """
  314. browser.find_element_by_css_selector('input').send_keys("22")
  315. browser.find_element_by_tag_name('form').submit()
  316. time.sleep(0.5)
  317. browser.find_element_by_css_selector('input').send_keys("secret")
  318. browser.find_element_by_tag_name('form').submit()
  319. time.sleep(0.5)
  320. browser.find_element_by_tag_name('form').submit()
  321. # checkbox
  322. time.sleep(0.5)
  323. browser.execute_script("arguments[0].click();", browser.find_element_by_css_selector('input'))
  324. browser.find_element_by_tag_name('form').submit()
  325. # Text Area
  326. time.sleep(0.5)
  327. browser.find_element_by_css_selector('textarea').send_keys(" ".join(str(i) for i in range(20)))
  328. browser.find_element_by_tag_name('form').submit()
  329. # file
  330. time.sleep(0.5)
  331. img_path = path.join(here_dir, 'assets', 'img.png')
  332. browser.find_element_by_css_selector('input').send_keys(img_path)
  333. browser.find_element_by_tag_name('form').submit()
  334. # text
  335. time.sleep(0.5)
  336. browser.find_element_by_css_selector('input').send_keys("text")
  337. browser.find_element_by_tag_name('form').submit()
  338. # valid func, age in [10, 60]
  339. time.sleep(0.5)
  340. browser.find_element_by_css_selector('input').send_keys("1")
  341. browser.find_element_by_tag_name('form').submit()
  342. time.sleep(0.5)
  343. browser.find_element_by_css_selector('input').clear()
  344. browser.find_element_by_css_selector('input').send_keys("90")
  345. browser.find_element_by_tag_name('form').submit()
  346. time.sleep(0.5)
  347. browser.find_element_by_css_selector('input').clear()
  348. browser.find_element_by_css_selector('input').send_keys("23")
  349. browser.find_element_by_tag_name('form').submit()
  350. # code
  351. time.sleep(0.5)
  352. # browser.find_element_by_css_selector('textarea').send_keys(" ".join(str(i) for i in range(20)))
  353. browser.find_element_by_tag_name('form').submit()
  354. # Cancelable from group
  355. time.sleep(0.5)
  356. browser.find_element_by_name('name').send_keys("name")
  357. browser.find_element_by_name('age').send_keys("90")
  358. browser.find_element_by_tag_name('form').submit()
  359. enable_percy and percySnapshot(browser=browser, name='input group invalid')
  360. time.sleep(0.5)
  361. browser.find_element_by_name('age').clear()
  362. browser.find_element_by_name('age').send_keys("23")
  363. browser.find_element_by_tag_name('form').submit()
  364. # Input group
  365. time.sleep(1)
  366. enable_percy and percySnapshot(browser=browser, name='input group all')
  367. browser.find_element_by_name('text').send_keys("name")
  368. browser.find_element_by_name('number').send_keys("20")
  369. browser.find_element_by_name('float').send_keys("3.1415")
  370. browser.find_element_by_name('password').send_keys("password")
  371. browser.find_element_by_name('textarea').send_keys(" ".join(str(i) for i in range(20)))
  372. # browser.find_element_by_css_selector('[name="code"]').send_keys(" ".join(str(i) for i in range(10)))
  373. Select(browser.find_element_by_name('select-multiple')).select_by_index(0)
  374. # browser. find_element_by_css_selector('[name="select"]'). send_keys("name")
  375. # browser. find_element_by_css_selector('[name="checkbox-inline"]'). send_keys("name")
  376. # browser. find_element_by_css_selector('[name="checkbox"]'). send_keys("name")
  377. # browser. find_element_by_css_selector('[name="radio-inline"]'). send_keys("name")
  378. # browser. find_element_by_css_selector('[name="radio"]'). send_keys("name")
  379. browser.find_element_by_name('file_upload').send_keys(path.join(here_dir, 'assets', 'helloworld.txt'))
  380. browser.execute_script("arguments[0].click();", browser.find_element_by_css_selector('button[value="submit2"]'))
  381. time.sleep(0.5)
  382. enable_percy and percySnapshot(browser=browser, name='input group all invalid')
  383. browser.find_element_by_name('password').clear()
  384. browser.find_element_by_name('password').send_keys("123")
  385. browser.execute_script("arguments[0].click();", browser.find_element_by_css_selector('button[value="submit2"]'))
  386. time.sleep(0.5)
  387. enable_percy and percySnapshot(browser=browser, name='input group all submit')
  388. browser.find_element_by_css_selector('form').submit()
  389. # background
  390. time.sleep(3)
  391. get_visible_form(browser).find_element_by_css_selector('input').send_keys("background")
  392. get_visible_form(browser).find_element_by_tag_name('form').submit()
  393. # front
  394. time.sleep(0.5)
  395. get_visible_form(browser).find_element_by_css_selector('input').send_keys("front")
  396. get_visible_form(browser).find_element_by_tag_name('form').submit()
  397. def set_defer_call():
  398. def deferred_1():
  399. open('test_defer.tmp', 'w').write('deferred_1')
  400. def deferred_2():
  401. open('test_defer.tmp', 'a').write('deferred_2')
  402. defer_call(deferred_1)
  403. defer_call(deferred_2)
  404. def test_defer_call():
  405. output = open('test_defer.tmp').read()
  406. assert "deferred_1" in output
  407. assert "deferred_2" in output
  408. os.remove('test_defer.tmp')
  409. def save_output(browser: Chrome, filename):
  410. """获取输出区html源码,并去除随机元素"""
  411. html = browser.find_element_by_id('markdown-body').get_attribute('innerHTML')
  412. html = re.sub(r"WebIO.DisplayAreaButtonOnClick\(.*?\)", '', html)
  413. open(path.join(here_dir, 'output', filename), 'w').write(html)