fixtures.ts 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
  1. import * as fs from 'fs'
  2. import * as path from 'path'
  3. import { test as base, expect, ConsoleMessage, Locator } from '@playwright/test';
  4. import { ElectronApplication, Page, BrowserContext, _electron as electron } from 'playwright'
  5. import { loadLocalGraph, openLeftSidebar, randomString } from './utils';
  6. import { autocompleteMenu, LogseqFixtures } from './types';
  7. let electronApp: ElectronApplication
  8. let context: BrowserContext
  9. let page: Page
  10. // For testing special characters in graph name / path
  11. let repoName = "@" + randomString(10)
  12. let testTmpDir = path.resolve(__dirname, '../tmp')
  13. if (fs.existsSync(testTmpDir)) {
  14. fs.rmSync(testTmpDir, { recursive: true })
  15. }
  16. export let graphDir = path.resolve(testTmpDir, "#e2e-test", repoName)
  17. // NOTE: This following is a console log watcher for error logs.
  18. // Save and print all logs when error happens.
  19. let logs: string = '';
  20. const consoleLogWatcher = (msg: ConsoleMessage) => {
  21. const text = msg.text();
  22. // List of error messages to ignore
  23. const ignoreErrors = [
  24. /net/,
  25. /^Error with Permissions-Policy header:/
  26. ];
  27. // If the text matches any of the ignoreErrors, return early
  28. if (ignoreErrors.some(error => text.match(error))) {
  29. console.log(`WARN:: ${text}\n`)
  30. return;
  31. }
  32. logs += text + '\n';
  33. expect(text, logs).not.toMatch(/^(Failed to|Uncaught|Assert failed)/);
  34. expect(text, logs).not.toMatch(/^Error/);
  35. }
  36. base.beforeAll(async () => {
  37. if (electronApp) {
  38. return
  39. }
  40. console.log(`Creating test graph directory: ${graphDir}`)
  41. fs.mkdirSync(graphDir, {
  42. recursive: true,
  43. });
  44. electronApp = await electron.launch({
  45. cwd: "./static",
  46. args: ["electron.js"],
  47. locale: 'en',
  48. timeout: 10_000, // should be enough for the app to start
  49. })
  50. context = electronApp.context()
  51. await context.tracing.start({ screenshots: true, snapshots: true });
  52. await context.tracing.startChunk();
  53. // NOTE: The following ensures App first start with the correct path.
  54. const info = await electronApp.evaluate(async ({ app }) => {
  55. return {
  56. "appPath": app.getAppPath(),
  57. "appData": app.getPath("appData"),
  58. "userData": app.getPath("userData"),
  59. "appName": app.getName(),
  60. "electronVersion": app.getVersion(),
  61. }
  62. })
  63. console.log("Test start with:", info)
  64. page = await electronApp.firstWindow()
  65. // inject testing flags
  66. await page.evaluate(
  67. () => {
  68. Object.assign(window, {
  69. __E2E_TESTING__: true,
  70. })
  71. },
  72. )
  73. // Direct Electron console to watcher
  74. page.on('console', consoleLogWatcher)
  75. page.on('crash', () => {
  76. expect(false, "Page must not crash").toBeTruthy()
  77. })
  78. page.on('pageerror', (err) => {
  79. console.log(err)
  80. // expect(false, 'Page must not have errors!').toBeTruthy()
  81. })
  82. await page.waitForLoadState('domcontentloaded')
  83. // NOTE: The following ensures first start.
  84. // await page.waitForSelector('text=This is a demo graph, changes will not be saved until you open a local folder')
  85. await page.waitForSelector(':has-text("Loading")', {
  86. state: "hidden",
  87. timeout: 1000 * 15,
  88. });
  89. page.once('load', async () => {
  90. console.log('Page loaded!')
  91. await page.screenshot({ path: 'startup.png' })
  92. })
  93. await loadLocalGraph(page, graphDir);
  94. // render app
  95. await page.waitForFunction('window.document.title !== "Loading"')
  96. expect(await page.title()).toMatch(/^Logseq.*?/)
  97. await openLeftSidebar(page)
  98. })
  99. base.beforeEach(async () => {
  100. // discard any dialog by ESC
  101. if (page) {
  102. await page.keyboard.press('Escape')
  103. await page.keyboard.press('Escape')
  104. await expect(page.locator('.notification-close-button')).not.toBeVisible()
  105. const rightSidebar = page.locator('.cp__right-sidebar-inner')
  106. if (await rightSidebar.isVisible()) {
  107. await page.click('button.toggle-right-sidebar', {delay: 100})
  108. }
  109. }
  110. })
  111. // hijack electron app into the test context
  112. // FIXME: add type to `block`
  113. export const test = base.extend<LogseqFixtures>({
  114. page: async ({ }, use) => {
  115. await use(page);
  116. },
  117. // Timeout is used to avoid global timeout, local timeout will have a meaningful error report.
  118. // 1s timeout is enough for most of the test cases.
  119. // Timeout won't introduce additional sleeps.
  120. block: async ({ page }, use) => {
  121. const block = {
  122. mustFill: async (value: string) => {
  123. const locator: Locator = page.locator('textarea >> nth=0')
  124. await locator.waitFor({ timeout: 1000 })
  125. await locator.fill(value)
  126. await expect(locator).toHaveText(value, { timeout: 1000 })
  127. },
  128. mustType: async (value: string, options?: { delay?: number, toBe?: string }) => {
  129. const locator: Locator = page.locator('textarea >> nth=0')
  130. await locator.waitFor({ timeout: 1000 })
  131. const { delay = 50 } = options || {};
  132. const { toBe = value } = options || {};
  133. await locator.type(value, { delay })
  134. await expect(locator).toHaveText(toBe, { timeout: 1000 })
  135. },
  136. enterNext: async (): Promise<Locator> => {
  137. let blockCount = await page.locator('.page-blocks-inner .ls-block').count()
  138. await page.press('textarea >> nth=0', 'Enter')
  139. await page.waitForSelector(`.ls-block >> nth=${blockCount} >> textarea`, { state: 'visible', timeout: 1000 })
  140. return page.locator('textarea >> nth=0')
  141. },
  142. clickNext: async (): Promise<Locator> => {
  143. await page.$eval('.add-button-link-wrap', (element) => {
  144. element.scrollIntoView();
  145. });
  146. let blockCount = await page.locator('.page-blocks-inner .ls-block').count()
  147. // the next element after all blocks.
  148. await page.click('.add-button-link-wrap', { delay: 100 })
  149. await page.waitForSelector(`.ls-block >> nth=${blockCount} >> textarea`, { state: 'visible', timeout: 1000 })
  150. return page.locator('textarea >> nth=0')
  151. },
  152. indent: async (): Promise<boolean> => {
  153. const locator = page.locator('textarea >> nth=0')
  154. const before = await locator.boundingBox()
  155. await locator.press('Tab', { delay: 100 })
  156. return (await locator.boundingBox()).x > before.x
  157. },
  158. unindent: async (): Promise<boolean> => {
  159. const locator = page.locator('textarea >> nth=0')
  160. const before = await locator.boundingBox()
  161. await locator.press('Shift+Tab', { delay: 100 })
  162. return (await locator.boundingBox()).x < before.x
  163. },
  164. waitForBlocks: async (total: number): Promise<void> => {
  165. // NOTE: `nth=` counts from 0.
  166. await page.waitForSelector(`.ls-block >> nth=${total - 1}`, { state: 'attached', timeout: 50000 })
  167. await page.waitForSelector(`.ls-block >> nth=${total}`, { state: 'detached', timeout: 50000 })
  168. },
  169. waitForSelectedBlocks: async (total: number): Promise<void> => {
  170. // NOTE: `nth=` counts from 0.
  171. await page.waitForSelector(`.ls-block.selected >> nth=${total - 1}`, { timeout: 1000 })
  172. },
  173. escapeEditing: async (): Promise<void> => {
  174. const blockEdit = page.locator('.ls-block textarea >> nth=0')
  175. while (await blockEdit.isVisible()) {
  176. await page.keyboard.press('Escape')
  177. }
  178. const blockSelect = page.locator('.ls-block.selected')
  179. while (await blockSelect.isVisible()) {
  180. await page.keyboard.press('Escape')
  181. }
  182. },
  183. activeEditing: async (nth: number): Promise<void> => {
  184. await page.waitForSelector(`.ls-block >> nth=${nth}`, { timeout: 1000 })
  185. // scroll, for isVisible test
  186. await page.$eval(`.ls-block >> nth=${nth}`, (element) => {
  187. element.scrollIntoView();
  188. });
  189. // when blocks are nested, the first block(the parent) is selected.
  190. if (
  191. (await page.isVisible(`.ls-block >> nth=${nth} >> .editor-wrapper >> textarea`)) &&
  192. !(await page.isVisible(`.ls-block >> nth=${nth} >> .block-children-container >> textarea`))) {
  193. return;
  194. }
  195. await page.click(`.ls-block >> nth=${nth} >> .block-content`, { delay: 10, timeout: 100000 })
  196. await page.waitForSelector(`.ls-block >> nth=${nth} >> .editor-wrapper >> textarea`, { timeout: 1000, state: 'visible' })
  197. },
  198. isEditing: async (): Promise<boolean> => {
  199. const locator = page.locator('.ls-block textarea >> nth=0')
  200. return await locator.isVisible()
  201. },
  202. selectionStart: async (): Promise<number> => {
  203. return await page.locator('textarea >> nth=0').evaluate(node => {
  204. const elem = <HTMLTextAreaElement>node
  205. return elem.selectionStart
  206. })
  207. },
  208. selectionEnd: async (): Promise<number> => {
  209. return await page.locator('textarea >> nth=0').evaluate(node => {
  210. const elem = <HTMLTextAreaElement>node
  211. return elem.selectionEnd
  212. })
  213. }
  214. }
  215. use(block)
  216. },
  217. autocompleteMenu: async ({ }, use) => {
  218. const autocompleteMenu: autocompleteMenu = {
  219. expectVisible: async (modalName?: string) => {
  220. const modal = page.locator(modalName ? `[data-modal-name="${modalName}"]` : `[data-modal-name]`)
  221. if (await modal.isVisible()) {
  222. await page.waitForTimeout(100)
  223. await expect(modal).toBeVisible()
  224. } else {
  225. await modal.waitFor({ state: 'visible', timeout: 1000 })
  226. }
  227. },
  228. expectHidden: async (modalName?: string) => {
  229. const modal = page.locator(modalName ? `[data-modal-name="${modalName}"]` : `[data-modal-name]`)
  230. if (!await modal.isVisible()) {
  231. await page.waitForTimeout(100)
  232. await expect(modal).not.toBeVisible()
  233. } else {
  234. await modal.waitFor({ state: 'hidden', timeout: 1000 })
  235. }
  236. }
  237. }
  238. await use(autocompleteMenu)
  239. },
  240. context: async ({ }, use) => {
  241. await use(context);
  242. },
  243. app: async ({ }, use) => {
  244. await use(electronApp);
  245. },
  246. graphDir: async ({ }, use) => {
  247. await use(graphDir);
  248. },
  249. });
  250. let getTracingFilePath = function(): string {
  251. return `e2e-dump/trace-${Date.now()}.zip.dump`
  252. }
  253. test.afterAll(async () => {
  254. await context.tracing.stopChunk({ path: getTracingFilePath() });
  255. })
  256. /**
  257. * Trace all tests in a file
  258. */
  259. export let traceAll = function(){
  260. test.beforeAll(async () => {
  261. await context.tracing.startChunk();
  262. })
  263. test.afterAll(async () => {
  264. await context.tracing.stopChunk({ path: getTracingFilePath() });
  265. })
  266. }