template.py 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599
  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_scope('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)
  41. put_text('<hr/>:')
  42. put_html("<hr/>")
  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"])
  57. img_data = open(path.join(here_dir, 'assets', 'img.png'), 'rb').read()
  58. put_table([
  59. ['Type', 'Content'],
  60. ['text', put_text('<hr/>', inline=True)],
  61. ['html', 'X<sup>2</sup>'],
  62. ['buttons', put_buttons(['A', 'B'], onclick=None, small=True)],
  63. ['markdown', put_markdown('`awesome PyWebIO!`\n - 1\n - 2\n - 3')],
  64. ['file', put_file('hello.text', b'')],
  65. ['image', put_image(img_data)],
  66. ['table', put_table([
  67. ['A', 'B'],
  68. [put_markdown('`C`'), put_markdown('`D`')]
  69. ])]
  70. ])
  71. put_text('code:')
  72. put_code(json.dumps(dict(name='pywebio', author='wangweimin'), indent=4), 'json')
  73. put_text('move ⬆ code block to screen ... :')
  74. with use_scope('scroll_basis_btns'):
  75. put_buttons(buttons=[
  76. ('BOTTOM', Position.BOTTOM),
  77. ('TOP', Position.TOP),
  78. ('MIDDLE', Position.MIDDLE),
  79. ], onclick=lambda pos: scroll_to('scroll_basis', pos))
  80. def show_popup():
  81. popup('Popup title', [
  82. '<h3>Popup Content</h3>',
  83. put_text('html: <br/>'),
  84. put_table([
  85. ['Type', 'Content'],
  86. ['html', 'X<sup>2</sup>'],
  87. ['text', put_text('<hr/>')],
  88. ['buttons', put_buttons(['A', 'B'], onclick=...)],
  89. ['markdown', put_markdown('`Awesome PyWebIO!`')],
  90. ['file', put_file('hello.text', b'')],
  91. ['table', put_table([['A', 'B'], ['C', 'D']])]
  92. ]),
  93. put_buttons(['close_popup()'], onclick=lambda _: close_popup())
  94. ], size=PopupSize.NORMAL)
  95. with use_scope('popup_btn'):
  96. put_buttons(['popup()'], onclick=lambda _: show_popup())
  97. def edit_row(choice, row):
  98. put_text("You click %s button at row %s" % (choice, row), scope='table_cell_buttons')
  99. with use_scope('table_cell_buttons'):
  100. put_table([
  101. ['Idx', 'Actions'],
  102. ['1', put_buttons(['edit', 'delete'], onclick=partial(edit_row, row=1))],
  103. ['2', put_buttons(['edit', 'delete'], onclick=partial(edit_row, row=2))],
  104. ['3', put_buttons(['edit', 'delete'], onclick=partial(edit_row, row=3))],
  105. ])
  106. with use_scope('put_buttons'):
  107. put_buttons(['A', 'B', 'C'], onclick=partial(put_text, scope='put_buttons'))
  108. put_image(img_data)
  109. put_image(img_data, width="30px")
  110. put_image(img_data, height="50px")
  111. put_file('hello_word.txt', b'hello word!')
  112. put_markdown('### Scope')
  113. with use_scope('scope1'):
  114. put_text('A') # 输出内容: A
  115. put_text('B', position=0) # 输出内容: B A
  116. put_text('C', position=-2) # 输出内容: B C A
  117. with use_scope('scope2'):
  118. put_text('scope2')
  119. put_text('scope2')
  120. put_text('D', position=1) # 输出内容: B D C A
  121. put_text('before=top again', scope='top')
  122. with use_scope('to_remove'):
  123. put_text('to remove')
  124. remove('to_remove')
  125. session_info = get_info()
  126. from django.http import HttpRequest
  127. from flask import Request
  128. from tornado.httputil import HTTPServerRequest
  129. from aiohttp.web import BaseRequest
  130. request_type = {
  131. 'tornado': HTTPServerRequest,
  132. 'flask': Request,
  133. 'django': HttpRequest,
  134. 'aiohttp': BaseRequest,
  135. }
  136. request_ok = isinstance(session_info.request, request_type.get(session_info.backend))
  137. if not request_ok:
  138. print('Error: request check error: backend %s, request type %s, class %s' %
  139. (session_info.backend, type(session_info.request).__name__, session_info.request))
  140. put_markdown(rf"""### 会话信息
  141. ```
  142. * `user_agent`:
  143. * `is_mobile` (bool): {session_info.user_agent.is_mobile}
  144. * `is_tablet` (bool): {session_info.user_agent.is_tablet}
  145. * `is_pc` (bool): {session_info.user_agent.is_pc}
  146. * `is_touch_capable` (bool): {session_info.user_agent.is_touch_capable}
  147. * `browser.family` (str): {session_info.user_agent.browser.family}
  148. * `os.family` (str): {session_info.user_agent.os.family}
  149. * `os.version` (tuple): {session_info.user_agent.os.version}
  150. * `os.version_string` (str): {session_info.user_agent.os.version_string}
  151. * `device.family` (str): {session_info.user_agent.device.family}
  152. * `device.brand` (str): {session_info.user_agent.device.brand}
  153. * `device.model` (str): {session_info.user_agent.device.model}
  154. * `user_language` (str): {session_info.user_language}
  155. * `server_host` (str): {session_info.server_host}
  156. * `origin` (str): {session_info.origin or 'http://' + session_info.server_host}
  157. * `user_ip` (str): {session_info.user_ip}
  158. * `request type check` (str): {request_ok}
  159. ```
  160. """, strip_indent=4)
  161. def background_output():
  162. put_text("Background output")
  163. set_scope('background')
  164. def background():
  165. for i in range(20):
  166. put_text('%s ' % i, inline=True, scope='background')
  167. t = threading.Thread(target=background)
  168. register_thread(t)
  169. t.start()
  170. async def coro_background_output():
  171. put_text("Background output")
  172. set_scope('background')
  173. async def background():
  174. for i in range(20):
  175. put_text('%s ' % i, inline=True, scope='background')
  176. return run_async(background())
  177. def test_output(browser: Chrome, enable_percy=False):
  178. """测试输出::
  179. run template.basic_output()
  180. template.background_output() # 或者 await template.coro_background_output()
  181. hold()
  182. """
  183. time.sleep(0.5) # 等待输出完毕
  184. # get focus
  185. browser.find_element_by_tag_name('body').click()
  186. time.sleep(0.5)
  187. tab_btns = browser.find_elements_by_css_selector('#pywebio-scope-table_cell_buttons button')
  188. for btn in tab_btns:
  189. time.sleep(0.5)
  190. browser.execute_script("arguments[0].click();", btn)
  191. btns = browser.find_elements_by_css_selector('#pywebio-scope-put_buttons button')
  192. for btn in btns:
  193. time.sleep(0.5)
  194. browser.execute_script("arguments[0].click();", btn)
  195. # 滚动窗口
  196. btns = browser.find_elements_by_css_selector('#pywebio-scope-scroll_basis_btns button')
  197. for btn in btns:
  198. time.sleep(1)
  199. browser.execute_script("arguments[0].click();", btn)
  200. time.sleep(1)
  201. enable_percy and percySnapshot(browser=browser, name='basic output')
  202. # popup
  203. btn = browser.find_element_by_css_selector('#pywebio-scope-popup_btn button')
  204. browser.execute_script("arguments[0].click();", btn)
  205. time.sleep(1)
  206. enable_percy and percySnapshot(browser=browser, name='popup')
  207. browser.execute_script("$('.modal').modal('hide');")
  208. def basic_input():
  209. age = yield input("How old are you?", type=NUMBER)
  210. put_markdown(f'`{repr(age)}`')
  211. password = yield input("Input password", type=PASSWORD)
  212. put_markdown(f'`{repr(password)}`')
  213. # 下拉选择框
  214. gift = yield select('Which gift you want?', ['keyboard', 'ipad'])
  215. put_markdown(f'`{repr(gift)}`')
  216. # CheckBox
  217. agree = yield checkbox("用户协议", options=['I agree to terms and conditions'])
  218. put_markdown(f'`{repr(agree)}`')
  219. # Text Area
  220. text = yield textarea('Text Area', rows=3, placeholder='Some text')
  221. put_markdown(f'`{repr(text)}`')
  222. # 文件上传
  223. img = yield file_upload("Select a image:", accept="image/*")
  224. put_image(img['content'], title=img['filename'])
  225. # 输入参数
  226. res = yield input('This is label', type=TEXT, placeholder='This is placeholder,required=True',
  227. help_text='This is help text', required=True)
  228. put_markdown(f'`{repr(res)}`')
  229. # 校验函数
  230. def check_age(p): # 检验函数校验通过时返回None,否则返回错误消息
  231. if p < 10:
  232. return 'Too young!!'
  233. if p > 60:
  234. return 'Too old!!'
  235. age = yield input("How old are you?", type=NUMBER, valid_func=check_age, help_text='age in [10, 60]')
  236. put_markdown(f'`{repr(age)}`')
  237. # Codemirror
  238. code = yield textarea('Code Edit', code={
  239. 'mode': "python", # 编辑区代码语言
  240. 'theme': 'darcula', # 编辑区darcula主题, Visit https://codemirror.net/demo/theme.html#cobalt to get more themes
  241. }, value='import something\n# Write your python code')
  242. put_markdown(f'`{repr(code)}`')
  243. # 输入组
  244. info = yield input_group("Cancelable", [
  245. input('Input your name', name='name'),
  246. input('Input your age', name='age', type=NUMBER, valid_func=check_age, help_text='age in [10, 60]')
  247. ], cancelable=True)
  248. put_markdown(f'`{repr(info)}`')
  249. def check_form(data): # 检验函数校验通过时返回None,否则返回 (input name,错误消息)
  250. if len(data['password']) > 6:
  251. return ('password', 'password太长!')
  252. check_item_data = []
  253. def check_item(data):
  254. check_item_data.append(repr(data))
  255. info = yield input_group('Input group', [
  256. input('Text', type=TEXT, datalist=['data-%s' % i for i in range(10)], name='text',
  257. required=True, help_text='required=True', valid_func=check_item),
  258. input('Number', type=NUMBER, value="42", name='number', valid_func=check_item),
  259. input('Float', type=FLOAT, name='float', valid_func=check_item),
  260. input('Password', type=PASSWORD, name='password', valid_func=check_item),
  261. textarea('Textarea', rows=3, maxlength=20, name='textarea',
  262. help_text='rows=3, maxlength=20', valid_func=check_item),
  263. textarea('Code', name='code', code={
  264. 'lineNumbers': False,
  265. 'indentUnit': 2,
  266. }, value='import something\n# Write your python code', valid_func=check_item),
  267. select('select-multiple', [
  268. {'label': '标签0,selected', 'value': '0', 'selected': True},
  269. {'label': '标签1,disabled', 'value': '1', 'disabled': True},
  270. ('标签2,selected', '2', True),
  271. ('标签3', '3'),
  272. ('标签4,disabled', '4', False, True),
  273. '标签5,selected',
  274. ], name='select-multiple', multiple=True, value=['标签5,selected'], required=True,
  275. help_text='required至少选择一项', valid_func=check_item),
  276. select('select', [
  277. {'label': '标签0', 'value': '0', 'selected': False},
  278. {'label': '标签1,disabled', 'value': '1', 'disabled': True},
  279. ('标签2', '2', False),
  280. ('标签3', '3'),
  281. ('标签4,disabled', '4', False, True),
  282. '标签5,selected',
  283. ], name='select', value=['标签5,selected'], valid_func=check_item),
  284. checkbox('checkbox-inline', [
  285. {'label': '标签0,selected', 'value': '0', 'selected': False},
  286. {'label': '标签1,disabled', 'value': '1', 'disabled': True},
  287. ('标签2,selected', '2', True),
  288. ('标签3', '3'),
  289. ('标签4,disabled', '4', False, True),
  290. '标签5,selected',
  291. ], inline=True, name='checkbox-inline', value=['标签5,selected', '标签0', '标签0,selected'], valid_func=check_item),
  292. checkbox('checkbox', [
  293. {'label': '标签0,selected', 'value': '0', 'selected': True},
  294. {'label': '标签1,disabled', 'value': '1', 'disabled': True},
  295. ('标签2,selected', '2', True),
  296. ('标签3', '3'),
  297. ('标签4,disabled', '4', False, True),
  298. '标签5',
  299. ], name='checkbox', valid_func=check_item),
  300. radio('radio-inline', [
  301. {'label': '标签0', 'value': '0', 'selected': False},
  302. {'label': '标签1,disabled', 'value': '1', 'disabled': True},
  303. ('标签2', '2', False),
  304. ('标签3', '3'),
  305. ('标签4,disabled', '4', False, True),
  306. '标签5,selected',
  307. ], inline=True, name='radio-inline', value='标签5,selected', valid_func=check_item),
  308. radio('radio', [
  309. {'label': '标签0', 'value': '0', 'selected': False},
  310. {'label': '标签1,disabled', 'value': '1', 'disabled': True},
  311. ('标签2', '2', False),
  312. ('标签3', '3'),
  313. ('标签4,disabled', '4', False, True),
  314. '标签5,selected',
  315. ], inline=False, name='radio', value='标签5,selected', valid_func=check_item),
  316. file_upload('file_upload', name='file_upload'),
  317. actions('actions', [
  318. {'label': '提交', 'value': 'submit'},
  319. ('提交2', 'submit2'),
  320. '提交3',
  321. {'label': 'disabled', 'disabled': True},
  322. ('重置', 'reset', 'reset'),
  323. {'label': '取消', 'type': 'cancel'},
  324. ], name='actions', help_text='actions'),
  325. ], valid_func=check_form)
  326. put_text('`valid_func()` log:')
  327. put_code(json.dumps(sorted(list(set(check_item_data))), indent=4, ensure_ascii=False), 'json')
  328. put_text('Form result:')
  329. if info:
  330. put_code(json.dumps([repr(i) for i in sorted(info.items())], indent=4, ensure_ascii=False), 'json')
  331. # yield actions(['Continue'])
  332. def background_input():
  333. def background():
  334. time.sleep(1)
  335. res = input('background')
  336. put_markdown(f'`background: {repr(res)}`')
  337. t = threading.Thread(target=background)
  338. register_thread(t)
  339. t.start()
  340. res = input('front')
  341. put_markdown(f'`front: {repr(res)}`')
  342. async def coro_background_input():
  343. async def background():
  344. await asyncio.sleep(1)
  345. res = await input('background')
  346. put_markdown(f'`background: {repr(res)}`')
  347. run_async(background())
  348. res = await input('front')
  349. put_markdown(f'`front: {repr(res)}`')
  350. async def flask_coro_background_input():
  351. async def background():
  352. await run_asyncio_coroutine(asyncio.sleep(1))
  353. res = await input('background')
  354. put_markdown(f'`background: {repr(res)}`')
  355. run_async(background())
  356. res = await input('front')
  357. put_markdown(f'`front: {repr(res)}`')
  358. def test_input(browser: Chrome, enable_percy=False):
  359. """测试输入::
  360. run template.basic_input()
  361. actions(['Continue'])
  362. template.background_input() # 或者 await template.coro_background_input() / flask_coro_background_input
  363. """
  364. browser.find_element_by_css_selector('input').send_keys("22")
  365. browser.find_element_by_tag_name('form').submit()
  366. time.sleep(0.5)
  367. browser.find_element_by_css_selector('input').send_keys("secret")
  368. browser.find_element_by_tag_name('form').submit()
  369. time.sleep(0.5)
  370. browser.find_element_by_tag_name('form').submit()
  371. # checkbox
  372. time.sleep(0.5)
  373. browser.execute_script("arguments[0].click();", browser.find_element_by_css_selector('input'))
  374. browser.find_element_by_tag_name('form').submit()
  375. # Text Area
  376. time.sleep(0.5)
  377. browser.find_element_by_css_selector('textarea').send_keys(" ".join(str(i) for i in range(20)))
  378. browser.find_element_by_tag_name('form').submit()
  379. # file
  380. time.sleep(0.5)
  381. img_path = path.join(here_dir, 'assets', 'img.png')
  382. browser.find_element_by_css_selector('input').send_keys(img_path)
  383. browser.find_element_by_tag_name('form').submit()
  384. # text
  385. time.sleep(0.5)
  386. browser.find_element_by_css_selector('input').send_keys("text")
  387. browser.find_element_by_tag_name('form').submit()
  388. # valid func, age in [10, 60]
  389. time.sleep(0.5)
  390. browser.find_element_by_css_selector('input').send_keys("1")
  391. browser.find_element_by_tag_name('form').submit()
  392. time.sleep(0.5)
  393. browser.find_element_by_css_selector('input').clear()
  394. browser.find_element_by_css_selector('input').send_keys("90")
  395. browser.find_element_by_tag_name('form').submit()
  396. time.sleep(0.5)
  397. browser.find_element_by_css_selector('input').clear()
  398. browser.find_element_by_css_selector('input').send_keys("23")
  399. browser.find_element_by_tag_name('form').submit()
  400. # code
  401. time.sleep(0.5)
  402. # browser.find_element_by_css_selector('textarea').send_keys(" ".join(str(i) for i in range(20)))
  403. browser.find_element_by_tag_name('form').submit()
  404. # Cancelable from group
  405. time.sleep(0.5)
  406. browser.find_element_by_name('name').send_keys("name")
  407. browser.find_element_by_name('age').send_keys("90")
  408. browser.find_element_by_tag_name('form').submit()
  409. enable_percy and percySnapshot(browser=browser, name='input group invalid')
  410. time.sleep(0.5)
  411. browser.find_element_by_name('age').clear()
  412. browser.find_element_by_name('age').send_keys("23")
  413. browser.find_element_by_tag_name('form').submit()
  414. # Input group
  415. time.sleep(1)
  416. enable_percy and percySnapshot(browser=browser, name='input group all')
  417. browser.find_element_by_name('text').send_keys("name")
  418. browser.find_element_by_name('number').send_keys("20")
  419. browser.find_element_by_name('float').send_keys("3.1415")
  420. browser.find_element_by_name('password').send_keys("password")
  421. browser.find_element_by_name('textarea').send_keys(" ".join(str(i) for i in range(20)))
  422. # browser.find_element_by_css_selector('[name="code"]').send_keys(" ".join(str(i) for i in range(10)))
  423. Select(browser.find_element_by_name('select-multiple')).select_by_index(0)
  424. # browser. find_element_by_css_selector('[name="select"]'). send_keys("name")
  425. # browser. find_element_by_css_selector('[name="checkbox-inline"]'). send_keys("name")
  426. # browser. find_element_by_css_selector('[name="checkbox"]'). send_keys("name")
  427. # browser. find_element_by_css_selector('[name="radio-inline"]'). send_keys("name")
  428. # browser. find_element_by_css_selector('[name="radio"]'). send_keys("name")
  429. browser.find_element_by_name('file_upload').send_keys(path.join(here_dir, 'assets', 'helloworld.txt'))
  430. browser.execute_script("arguments[0].click();", browser.find_element_by_css_selector('button[value="submit2"]'))
  431. time.sleep(0.5)
  432. enable_percy and percySnapshot(browser=browser, name='input group all invalid')
  433. browser.find_element_by_name('password').clear()
  434. browser.find_element_by_name('password').send_keys("123")
  435. browser.execute_script("arguments[0].click();", browser.find_element_by_css_selector('button[value="submit2"]'))
  436. time.sleep(0.5)
  437. enable_percy and percySnapshot(browser=browser, name='input group all submit')
  438. browser.find_element_by_css_selector('form').submit()
  439. # background
  440. time.sleep(3)
  441. get_visible_form(browser).find_element_by_css_selector('input').send_keys("background")
  442. get_visible_form(browser).find_element_by_tag_name('form').submit()
  443. # front
  444. time.sleep(0.5)
  445. get_visible_form(browser).find_element_by_css_selector('input').send_keys("front")
  446. get_visible_form(browser).find_element_by_tag_name('form').submit()
  447. def set_defer_call():
  448. def deferred_1():
  449. open('test_defer.tmp', 'w').write('deferred_1')
  450. def deferred_2():
  451. open('test_defer.tmp', 'a').write('deferred_2')
  452. defer_call(deferred_1)
  453. defer_call(deferred_2)
  454. def test_defer_call():
  455. output = open('test_defer.tmp').read()
  456. assert "deferred_1" in output
  457. assert "deferred_2" in output
  458. os.remove('test_defer.tmp')
  459. def save_output(browser: Chrome, filename, process_func=None):
  460. """获取输出区html源码,并去除随机元素,供之后diff比较
  461. :param browser:
  462. :param filename:
  463. :param process_func: 自定义数据处理函数
  464. :return: 原始html文本
  465. """
  466. raw_html = browser.find_element_by_id('markdown-body').get_attribute('innerHTML')
  467. html = re.sub(r"WebIO.DisplayAreaButtonOnClick\(.*?\)", '', raw_html)
  468. html = re.sub(r"</(.*?)>", r'</\g<1>>\n', html) # 进行断行方便后续的diff判断
  469. if process_func:
  470. html = process_func(html)
  471. open(path.join(here_dir, 'output', filename), 'w').write(html)
  472. return raw_html