Skip to content

Commit

Permalink
update website screenshots script
Browse files Browse the repository at this point in the history
  • Loading branch information
cars10 committed Jul 18, 2023
1 parent 6afad6b commit 0d5f506
Show file tree
Hide file tree
Showing 13 changed files with 403 additions and 642 deletions.
8 changes: 0 additions & 8 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,5 @@ jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
cache: yarn
node-version: 18
- name: install dependencies
run: yarn
- name: install playwright
run: yarn playwright install --with-deps
- name: run tests
run: make ci
19 changes: 7 additions & 12 deletions Makefile
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
test:
yarn test:unit && yarn test:e2e:all
build_docker_ci:
docker build -f docker/Dockerfile_ci -t elasticvue-ci .

lint:
yarn lint

tsc:
yarn tsc

ci: tsc lint test
ci: build_docker_ci
docker run --rm elasticvue-ci yarn lint
docker run --rm elasticvue-ci yarn tsc
docker run --rm elasticvue-ci yarn test:unit
docker run --rm elasticvue-ci yarn test:e2e:all

build_tauri:
yarn tauri:build
Expand All @@ -16,9 +14,6 @@ build_tauri:
build_docker_nginx:
docker build -f docker/Dockerfile -t elasticvue .

run_docker_nginx:
docker run -p 8080:8080 --name elasticvue elasticvue:latest

# Build docker image to run elasticvue served by nginx MULTIARCH
build_docker_nginx_multiarch:
docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t elasticvue -f docker/Dockerfile_multiarch .
Expand Down
10 changes: 10 additions & 0 deletions docker/Dockerfile_ci
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
FROM node:18-bookworm AS builder
RUN mkdir /app
WORKDIR /app

COPY package.json .
COPY yarn.lock .

RUN yarn install
RUN yarn playwright install --with-deps
COPY . .
17 changes: 8 additions & 9 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,35 +18,34 @@
},
"dependencies": {
"@intlify/unplugin-vue-i18n": "^0.12.0",
"@quasar/extras": "^1.16.4",
"@quasar/extras": "^1.16.5",
"@tauri-apps/api": "^1.4.0",
"ace-builds": "^1.23.1",
"ace-builds": "^1.23.4",
"idb": "^7.1.1",
"pinia": "^2.1.4",
"pinia-plugin-persistedstate": "^3.1.0",
"pretty-bytes": "^6.1.0",
"pretty-bytes": "^6.1.1",
"quasar": "^2.12.2",
"vue": "^3.3.4",
"vue-i18n": "^9.2.2",
"vue-resizable": "^2.1.7",
"vue-router": "^4.2.2"
"vue-router": "^4.2.4"
},
"devDependencies": {
"@playwright/test": "^1.35.1",
"@playwright/test": "1.37.0-alpha-jul-16-2023",
"@quasar/vite-plugin": "^1.4.1",
"@tauri-apps/cli": "^1.4.0",
"@types/ace": "^0.0.48",
"@vitejs/plugin-vue": "^4.2.3",
"@vue/eslint-config-typescript": "^11.0.3",
"@vue/tsconfig": "^0.4.0",
"eslint": "^8.44.0",
"eslint": "^8.45.0",
"eslint-plugin-vue": "^9.15.1",
"playwright": "^1.36.0",
"sass": "1.32.13",
"typescript": "^5.1.6",
"vite": "^4.3.9",
"vite": "^4.4.4",
"vite-bundle-visualizer": "^0.8.0",
"vitest": "^0.33.0",
"vue-tsc": "^1.8.3"
"vue-tsc": "^1.8.5"
}
}
7 changes: 4 additions & 3 deletions scripts/chrome_ext_screenshots.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
const { chromium } = require('playwright');
const { chromium } = require('@playwright/test');

(async () => {
// Setup
const browser = await chromium.launch()
const page = await browser.newPage()
await page.setViewportSize({ width: 1280, height: 800 })
Expand Down Expand Up @@ -42,6 +41,8 @@ let counter = 1
const screenshot = async (page, name) => {
await page.locator('body').click()
await page.waitForTimeout(100)
await page.screenshot({ path: `scripts/screenshots/${counter}-${name}.png` })
const path = `scripts/screenshots/ext-${counter}-${name}.png`
await page.screenshot({ path })
console.log(path)
counter++
}
56 changes: 0 additions & 56 deletions scripts/chrome_ext_screenshots2.js

This file was deleted.

125 changes: 65 additions & 60 deletions scripts/website_screenshots.js
Original file line number Diff line number Diff line change
@@ -1,75 +1,80 @@
const puppeteer = require('puppeteer');
const { chromium } = require('@playwright/test');

(async () => {
const browser = await puppeteer.launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] })
const browser = await chromium.launch()
const page = await browser.newPage()
await page.setViewport({ width: 1920, height: 1080 })
await page.goto('http://localhost:8080')
await page.click('#theme_select')
await page.setViewportSize({ width: 1920, height: 1080 })

await page.goto('http://localhost:5173')
await connectWithServer(page)
await removeSnackbar(page)

await clickToNavigateAndScreenshot(page, '#navbar_home', 'screenshot_0_home_white.png')
await page.click('#theme_select')
await clickToNavigateAndScreenshot(page, '#navbar_nodes', 'screenshot_1_nodes.png')
await clickToNavigateAndScreenshot(page, '#navbar_shards', 'screenshot_2_shards.png')
await clickToNavigateAndScreenshot(page, ['#navbar_indices', 'button[title="Options"]'], 'screenshot_3_indices.png')
await clickToNavigateAndScreenshot(page, ['#navbar_indices', 'button[title="Options"]', 'i.mdi-at'], 'screenshot_4_indices.png')
await page.reload()
await page.click('#theme_select')
await clickToNavigateAndScreenshot(page, '#navbar_search', 'screenshot_5_search_dark.png', async page => {
await page.click('#search_submit')
await page.waitForTimeout(250)
await page.click('th[aria-label="author_name (author_name.keyword): Not sorted. Activate to sort ascending."')
await page.waitForTimeout(250)
})
await clickToNavigateAndScreenshot(page, '#navbar_query_rest', 'screenshot_6_query_dark.png', async page => {
await page.focus('#path')
await page.keyboard.type('_search')
await page.click('#execute_query')
await page.waitForTimeout(500)
})
await clickToNavigateAndScreenshot(page, ['#navbar_snapshots', '#navbar_snapshots_repositories', 'table tbody tr.tr--clickable'], 'screenshot_7_snapshots_dark.png')
await clickToNavigateAndScreenshot(page, '#navbar_utilities', 'screenshot_8_utilities_dark.png')
await clickToNavigateAndScreenshot(page, '#navbar_settings', 'screenshot_9_settings.png')
await screenshotHome(page)
await toggleTheme(page)
await screenshotNodes(page)
await screenshotShards(page)
await screenshotIndices(page)
await screenshotIndexAliases(page)
await screenshotSearch(page)
await screenshotEditDocument(page)
await screenshotRest(page)
await screenshotSettings(page)

await browser.close()
})()

async function connectWithServer (page) {
await page.waitForSelector('#test_connection')
await page.click('#test_connection')
await page.waitForSelector('#connect:not(.v-btn--disabled)')
await page.click('#connect')
await page.waitForTimeout(50)
const screenshotHome = async page => (await screenshot(page, 'home'))
const screenshotNodes = async page => (await navAndScreenshot(page, '#nodes', 'nodes'))
const screenshotShards = async page => (await navAndScreenshot(page, '#shards', 'shards'))
const screenshotIndices = async page => {
await page.locator('#indices').click()
await page.locator('table tbody tr').nth(2).locator('.q-btn').last().click()
await page.waitForTimeout(150)
await screenshot(page, 'indices', true)
}
const screenshotIndexAliases = async page => {
await page.locator('div.q-item__label').filter({ hasText: 'Aliases' }).click()
await page.waitForTimeout(200)
await screenshot(page, 'index-aliases')
await page.locator('#close').click()
}
const screenshotSearch = async page => (await navAndScreenshot(page, '#search', 'search', true))
const screenshotEditDocument = async page => {
await navAndScreenshot(page, 'body', 'document')
await page.locator('#close').click()
}
const screenshotRest = async page => {
await page.locator('#rest').click()
await page.locator('input[name="path"]').fill('_flush')
await navAndScreenshot(page, '#send_request', 'rest')
}
const screenshotSettings = async page => (await navAndScreenshot(page, '#settings', 'settings'))

const toggleTheme = async page => {
await page.locator('#change_theme').click()
}

async function removeSnackbar (page) {
await page.waitForSelector('.snackbar')
await page.evaluate(() => {
const div = document.querySelector('.snackbar')
div.parentNode.removeChild(div)
})
const connectWithServer = async page => {
await page.locator('#add_cluster').click()
await page.locator('input[name="uri"]').fill('http://localhost:9507')
await page.locator('#connect').click()
await page.waitForURL('http://localhost:5173/cluster/0')
}

async function clickToNavigateAndScreenshot (page, selectors, screenshot, callback) {
console.log(screenshot)
if (Array.isArray(selectors)) {
for (const selector of selectors) {
await page.waitForTimeout(200)
try {
await page.click(selector)
} catch (e) {
console.log('error.', e)
await page.screenshot({ path: 'scripts/website_screenshots/error.png' })
}
}
} else {
await page.waitForTimeout(200)
await page.click(selectors)
}
const navAndScreenshot = async (page, selector, name, persisted) => {
await page.locator(selector).click()
await screenshot(page, name, persisted)
}

await page.waitForTimeout(500)
if (typeof callback === 'function') await callback(page)
await page.screenshot({ path: 'scripts/website_screenshots/' + screenshot })
const closeSnackbar = async page => {
await page.locator('#close_snackbar').click()
}

let counter = 1
const screenshot = async (page, name, persisted) => {
if (!persisted) await page.locator('body').click()
await page.waitForTimeout(200)
const path = `scripts/screenshots/website-${counter}-${name}.png`
await page.screenshot({ path })
console.log(path)
counter++
}
4 changes: 2 additions & 2 deletions src/components/base/AppHeader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<q-tabs stretch>
<q-route-tab class="full-height" :label="t('base.app_header.navigation.home')" :to="{name: 'home'}" exact
:ripple="false" />
<q-route-tab :label="t('base.app_header.navigation.nodes')" :to="{name: 'nodes'}" :ripple="false" />
<q-route-tab id="nodes" :label="t('base.app_header.navigation.nodes')" :to="{name: 'nodes'}" :ripple="false" />
<q-route-tab id="shards" :label="t('base.app_header.navigation.shards')" :to="{name: 'shards'}"
:ripple="false" />
<q-route-tab id="indices" :label="t('base.app_header.navigation.indices')" :to="{name: 'indices'}"
Expand All @@ -22,7 +22,7 @@
<q-route-tab id="rest" :label="t('base.app_header.navigation.rest')" :to="{name: 'rest'}" :ripple="false" />
<q-route-tab :label="t('base.app_header.navigation.snapshots')" :to="{name: 'snapshot_repositories'}"
:ripple="false" />
<q-route-tab icon="settings" :to="{name: 'settings'}" :ripple="false" />
<q-route-tab id="settings" icon="settings" :to="{name: 'settings'}" :ripple="false" />
</q-tabs>
</q-toolbar>
</q-header>
Expand Down
3 changes: 2 additions & 1 deletion src/components/indices/IndexAliases.vue
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
<q-separator />

<q-table v-if="aliases.length > 0"
class="table-mono"
flat
dense
row-key="alias"
Expand All @@ -69,7 +70,7 @@
</q-table>

<q-card-section>
<q-btn v-close-popup flat :label="t('defaults.close')" />
<q-btn id="close" v-close-popup flat :label="t('defaults.close')" />
</q-card-section>
</q-card>
</q-dialog>
Expand Down
2 changes: 1 addition & 1 deletion src/components/indices/IndexRow.vue
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
</td>
<td>
<q-btn-group>
<q-btn icon="search" color="dark-grey" />
<q-btn icon="search" color="dark-grey" @click="showDocuments(index.index)" />
<q-btn-dropdown ref="menu" icon="settings" color="dark-grey">
<q-list padding dense>
<q-item clickable @click="openModalWith('indexGet', {index: index.index})">
Expand Down
2 changes: 1 addition & 1 deletion src/components/search/EditDocument.vue
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
type="submit"
class="q-mr-md"
@click="updateDocument" />
<q-btn v-close-popup flat :label="t('defaults.close')" />
<q-btn id="close" v-close-popup flat :label="t('defaults.close')" />
</q-card-section>
</q-card>
</q-dialog>
Expand Down
2 changes: 1 addition & 1 deletion src/components/search/SearchResultsTable.vue
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
<q-checkbox v-model="allItemsSelected" size="32px" @update:model-value="checkAll" />
</template>
</q-table>
<div v-else class="q-ma-md text-center">No Results</div>
<div v-else class="q-ma-md text-center">No Documents found</div>
</resizable-container>
</div>

Expand Down
Loading

0 comments on commit 0d5f506

Please sign in to comment.