From 98b8214a8280f3580b2d6806a19b8c4bbe7d1190 Mon Sep 17 00:00:00 2001 From: Adrian Dubel Date: Tue, 18 Feb 2025 09:14:26 +0000 Subject: [PATCH 1/2] Adubel/add configfile --- apps/blog/package.json | 6 +- ...ht.stack-mirrornet-local-3000-13.config.ts | 139 +++++++ ...right.stack-mirrornet-local-3000.config.ts | 139 +++++++ .../playwright/tests/support/loginHelper.ts | 3 +- .../tests/support/pages/homePage.ts | 6 + .../tests/support/pages/profileUserMenu.ts | 29 ++ .../tests/testnet_e2e/votingPOM.spec.ts | 380 +++++++++++++----- 7 files changed, 609 insertions(+), 93 deletions(-) create mode 100644 apps/blog/playwright.stack-mirrornet-local-3000-13.config.ts create mode 100644 apps/blog/playwright.stack-mirrornet-local-3000.config.ts diff --git a/apps/blog/package.json b/apps/blog/package.json index 5af519dec..86b27f1cd 100644 --- a/apps/blog/package.json +++ b/apps/blog/package.json @@ -21,7 +21,11 @@ "pw:test:local:experimental:ui": "playwright test --config=playwright.local3000.config.ts --ui", "pw:blog:test:mir:chromium": "playwright test --project=chromium --config=playwright.stack-mirrornet-3000.config.ts --update-snapshots", "pw:blog:test:mir:chromium:trace": "playwright test --project=chromium --config=playwright.stack-mirrornet-3000.config.ts --update-snapshots --trace on", - "pw:blog:test:mir:chromium:ui": "playwright test --project=chromium --config=playwright.stack-mirrornet-3000.config.ts --update-snapshots --ui" + "pw:blog:test:mir:chromium:ui": "playwright test --project=chromium --config=playwright.stack-mirrornet-3000.config.ts --update-snapshots --ui", + "pw:blog:test:mir:chromium:container:local": "playwright test --project=chromium --config=playwright.stack-mirrornet-local-3000.config.ts --headed --update-snapshots", + "pw:blog:test:mir:chromium:ui:container:local": "playwright test --project=chromium --config=playwright.stack-mirrornet-local-3000.config.ts --update-snapshots --ui", + "pw:blog:test:mir:chromium:container13:local": "playwright test --project=chromium --config=playwright.stack-mirrornet-local-3000-13.config.ts --headed --update-snapshots", + "pw:blog:test:mir:chromium:ui:container13:local": "playwright test --project=chromium --config=playwright.stack-mirrornet-local-3000-13.config.ts --update-snapshots --ui" }, "dependencies": { "@beam-australia/react-env": "^3.1.1", diff --git a/apps/blog/playwright.stack-mirrornet-local-3000-13.config.ts b/apps/blog/playwright.stack-mirrornet-local-3000-13.config.ts new file mode 100644 index 000000000..9e1619ee8 --- /dev/null +++ b/apps/blog/playwright.stack-mirrornet-local-3000-13.config.ts @@ -0,0 +1,139 @@ +import { defineConfig, devices } from '@playwright/test'; +require('dotenv').config({ path: '../../stack/mirrornet-stack.env' }); +require('dotenv').config({ path: '../.env.local' }); +require('dotenv').config({ path: './test.env' }); + +/** + * Read environment variables from file. + * https://github.com/motdotla/dotenv + */ +// require('dotenv').config(); + +/* The same default value as in site.ts */ +process.env.REACT_APP_API_ENDPOINT = "https://13.bc.fqdn.pl:8083/"; +if (process.env.REACT_APP_API_ENDPOINT.substr(-1) != '/') process.env.REACT_APP_API_ENDPOINT += '/'; + + +/** + * See https://playwright.dev/docs/test-configuration. + */ +export default defineConfig({ + testDir: './playwright/tests/testnet_e2e', + /* Maximum time one test can run for. */ + timeout: 60 * 1000, + expect: { + /** + * Maximum time expect() should wait for the condition to be met. + * For example in `await expect(locator).toHaveText();` + */ + timeout: 10 * 1000 + }, + /* Run tests in files in parallel */ + fullyParallel: true, + /* Fail the build on CI if you accidentally left test.only in the source code. */ + forbidOnly: !!process.env.CI, + /* Retry on CI only */ + retries: process.env.CI ? 2 : 0, + /* Opt out of parallel tests. */ + workers: 1, + /* Reporter to use. See https://playwright.dev/docs/test-reporters */ + reporter: process.env.CI + ? [ + [ + 'html', + { + open: 'never', + outputFolder: `playwright-report/` + } + ], + ['junit', { outputFile: `junit/results.xml` }], + ['list', { printSteps: false }] + ] + : 'html', + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ + actionTimeout: 0, + + /* Base URL to use in actions like `await page.goto('/')`. */ + /* baseURL: process.env.DENSER_URL || `https://${process.env.PUBLIC_HOSTNAME}:${process.env.BLOG_PORT}/`,*/ + baseURL: `https://13.bc.fqdn.pl:3000/`, + + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: 'retain-on-failure', + + /* Set viewport for headless to be full-hd */ + viewport: { width: 1920, height: 1080 }, + + /* Ignore SSL errors. */ + ignoreHTTPSErrors: true, + + /* Disable CORS */ + bypassCSP: true, + + /* Additional launch options */ + launchOptions: { + args: ['--disable-web-security', '--ignore-certificate-errors'], // add this to disable cors + }, + + // /* Additional context options */ + // contextOptions: { + // /* Disable service workers. */ + // serviceWorkers: 'block' + // } + }, + + /* Configure projects for major browsers */ + projects: [ + { + name: 'setup', + testMatch: /auth\.setup\.ts/ + }, + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + // dependencies: ['setup'] + }, + + { + name: 'firefox', + use: { ...devices['Desktop Firefox'] }, + // dependencies: ['setup'] + }, + + { + name: 'webkit', + use: { ...devices['Desktop Safari'] }, + // dependencies: ['setup'] + } + + /* Test against mobile viewports. */ + // { + // name: 'Mobile Chrome', + // use: { ...devices['Pixel 5'] }, + // }, + // { + // name: 'Mobile Safari', + // use: { ...devices['iPhone 12'] }, + // }, + + /* Test against branded browsers. */ + // { + // name: 'Microsoft Edge', + // use: { channel: 'msedge' }, + // }, + // { + // name: 'Google Chrome', + // use: { channel: 'chrome' }, + // }, + ] + + /* Folder for test artifacts such as screenshots, videos, traces, etc. */ + // outputDir: 'test-results/', + + /* Run your local dev server before starting the tests */ + // webServer: { + // command: 'npm run start', + // port: 3000, + // }, +}); diff --git a/apps/blog/playwright.stack-mirrornet-local-3000.config.ts b/apps/blog/playwright.stack-mirrornet-local-3000.config.ts new file mode 100644 index 000000000..86836e495 --- /dev/null +++ b/apps/blog/playwright.stack-mirrornet-local-3000.config.ts @@ -0,0 +1,139 @@ +import { defineConfig, devices } from '@playwright/test'; +require('dotenv').config({ path: '../../stack/mirrornet-stack.env' }); +require('dotenv').config({ path: '../.env.local' }); +require('dotenv').config({ path: './test.env' }); + +/** + * Read environment variables from file. + * https://github.com/motdotla/dotenv + */ +// require('dotenv').config(); + +/* The same default value as in site.ts */ +process.env.REACT_APP_API_ENDPOINT = "https://14.bc.fqdn.pl:8083/"; +if (process.env.REACT_APP_API_ENDPOINT.substr(-1) != '/') process.env.REACT_APP_API_ENDPOINT += '/'; + + +/** + * See https://playwright.dev/docs/test-configuration. + */ +export default defineConfig({ + testDir: './playwright/tests/testnet_e2e', + /* Maximum time one test can run for. */ + timeout: 60 * 1000, + expect: { + /** + * Maximum time expect() should wait for the condition to be met. + * For example in `await expect(locator).toHaveText();` + */ + timeout: 10 * 1000 + }, + /* Run tests in files in parallel */ + fullyParallel: true, + /* Fail the build on CI if you accidentally left test.only in the source code. */ + forbidOnly: !!process.env.CI, + /* Retry on CI only */ + retries: process.env.CI ? 2 : 0, + /* Opt out of parallel tests. */ + workers: 1, + /* Reporter to use. See https://playwright.dev/docs/test-reporters */ + reporter: process.env.CI + ? [ + [ + 'html', + { + open: 'never', + outputFolder: `playwright-report/` + } + ], + ['junit', { outputFile: `junit/results.xml` }], + ['list', { printSteps: false }] + ] + : 'html', + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ + actionTimeout: 0, + + /* Base URL to use in actions like `await page.goto('/')`. */ + /* baseURL: process.env.DENSER_URL || `https://${process.env.PUBLIC_HOSTNAME}:${process.env.BLOG_PORT}/`,*/ + baseURL: `https://14.bc.fqdn.pl:3000/`, + + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: 'retain-on-failure', + + /* Set viewport for headless to be full-hd */ + viewport: { width: 1920, height: 1080 }, + + /* Ignore SSL errors. */ + ignoreHTTPSErrors: true, + + /* Disable CORS */ + bypassCSP: true, + + /* Additional launch options */ + launchOptions: { + args: ['--disable-web-security', '--ignore-certificate-errors'], // add this to disable cors + }, + + // /* Additional context options */ + // contextOptions: { + // /* Disable service workers. */ + // serviceWorkers: 'block' + // } + }, + + /* Configure projects for major browsers */ + projects: [ + { + name: 'setup', + testMatch: /auth\.setup\.ts/ + }, + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + // dependencies: ['setup'] + }, + + { + name: 'firefox', + use: { ...devices['Desktop Firefox'] }, + // dependencies: ['setup'] + }, + + { + name: 'webkit', + use: { ...devices['Desktop Safari'] }, + // dependencies: ['setup'] + } + + /* Test against mobile viewports. */ + // { + // name: 'Mobile Chrome', + // use: { ...devices['Pixel 5'] }, + // }, + // { + // name: 'Mobile Safari', + // use: { ...devices['iPhone 12'] }, + // }, + + /* Test against branded browsers. */ + // { + // name: 'Microsoft Edge', + // use: { channel: 'msedge' }, + // }, + // { + // name: 'Google Chrome', + // use: { channel: 'chrome' }, + // }, + ] + + /* Folder for test artifacts such as screenshots, videos, traces, etc. */ + // outputDir: 'test-results/', + + /* Run your local dev server before starting the tests */ + // webServer: { + // command: 'npm run start', + // port: 3000, + // }, +}); diff --git a/apps/blog/playwright/tests/support/loginHelper.ts b/apps/blog/playwright/tests/support/loginHelper.ts index cdcbb24cc..a8f64d851 100644 --- a/apps/blog/playwright/tests/support/loginHelper.ts +++ b/apps/blog/playwright/tests/support/loginHelper.ts @@ -84,12 +84,13 @@ export class LoginHelper { await this.loginFormDefaut.passwordInput.fill(safeStoragePassword); await this.loginFormDefaut.wifInput.fill(privatePostingKey); await this.loginFormDefaut.saveSignInButton.click(); - await this.loginFormDefaut.page.waitForTimeout(20000); + await this.loginFormDefaut.page.waitForTimeout(3000); await this.homePage.profileAvatarButton.click(); // Validate User is logged in await this.page.waitForSelector(this.profileMenu.profileMenuContent['_selector']); await this.profileMenu.validateUserProfileManuIsOpen(); await this.profileMenu.validateUserNameInProfileMenu(username); + await this.profileMenu.clickCloseProfileMenu(); } async validateLoggedInUser(username: string){ diff --git a/apps/blog/playwright/tests/support/pages/homePage.ts b/apps/blog/playwright/tests/support/pages/homePage.ts index 3134f10fc..913fc3b1a 100644 --- a/apps/blog/playwright/tests/support/pages/homePage.ts +++ b/apps/blog/playwright/tests/support/pages/homePage.ts @@ -35,6 +35,9 @@ export class HomePage { readonly getPostCardFooter: Locator; readonly getUpvoteButton: Locator; readonly getFirstPostUpvoteButton: Locator; + readonly getFirstPostUpvoteButtonIcon: Locator; + readonly getSecondPostDownvoteButton: Locator; + readonly getSecondPostDownvoteButtonIcon: Locator; readonly getUpvoteButtonTooltip: Locator; readonly getDownvoteButton: Locator; readonly getReblogButton: Locator; @@ -147,6 +150,9 @@ export class HomePage { this.getPostCardFooter = page.locator('[data-testid="post-card-footer"]'); this.getUpvoteButton = page.locator('[data-testid="upvote-button"]'); this.getFirstPostUpvoteButton = this.getUpvoteButton.first(); + this.getFirstPostUpvoteButtonIcon = this.getFirstPostUpvoteButton.locator('svg'); + this.getSecondPostDownvoteButton = page.getByTestId('post-list-item').nth(1).getByTestId('downvote-button'); + this.getSecondPostDownvoteButtonIcon = this.getSecondPostDownvoteButton.locator('svg'); this.getFirstPostCardFooter = this.getPostCardFooter.first(); this.getUpvoteButtonTooltip = page.locator('[data-testid="upvote-button-tooltip"]'); this.getFirstPostUpvoteButtonTooltip = this.getUpvoteButtonTooltip.first(); diff --git a/apps/blog/playwright/tests/support/pages/profileUserMenu.ts b/apps/blog/playwright/tests/support/pages/profileUserMenu.ts index ed695ef87..45509de9c 100644 --- a/apps/blog/playwright/tests/support/pages/profileUserMenu.ts +++ b/apps/blog/playwright/tests/support/pages/profileUserMenu.ts @@ -1,7 +1,9 @@ import { Locator, Page, expect } from '@playwright/test'; +import { HomePage } from './homePage'; export class ProfileUserMenu { readonly page: Page; + readonly homePage: HomePage; readonly profileMenuContent: Locator; readonly profileUserName: Locator; readonly profileLink: Locator; @@ -9,12 +11,18 @@ export class ProfileUserMenu { readonly commentsLink: Locator; readonly repliesLink: Locator; readonly themeModeButton: Locator; + readonly themeModeItem: Locator; + readonly themeModeItemLight: Locator; + readonly themeModeItemDark: Locator; + readonly themeModeItemSystem: Locator; readonly languageTypeButton: Locator; readonly walletLink: Locator; readonly logoutLink: Locator; + readonly headerPostList: Locator; constructor(page: Page) { this.page = page; + this.homePage = new HomePage(page); this.profileMenuContent = page.locator('[data-testid="user-profile-menu-content"]'); this.profileUserName = page.locator('[data-testid="user-name-in-profile-menu"]'); this.profileLink = page.locator('[data-testid="user-profile-menu-profile-link"]'); @@ -22,9 +30,14 @@ export class ProfileUserMenu { this.commentsLink = page.locator('[data-testid="user-profile-menu-comments-link"]'); this.repliesLink = page.locator('[data-testid="user-profile-menu-replies-link"]'); this.themeModeButton = page.locator('[data-testid="theme-mode"]'); + this.themeModeItem = page.locator('[data-testid="theme-mode-item"]'); + this.themeModeItemLight = this.themeModeItem.locator(`span:text("Light")`); + this.themeModeItemDark = this.themeModeItem.locator(`span:text("Dark")`); + this.themeModeItemSystem = this.themeModeItem.locator(`span:text("System")`); this.languageTypeButton = page.locator('[data-testid="toggle-language"]'); this.walletLink = page.locator('[data-testid="user-profile-menu-wallet-link"]'); this.logoutLink = page.locator('[data-testid="user-profile-menu-logout-link"]'); + this.headerPostList = page.getByTestId('community-name').locator('..').locator('..'); } async validateUserProfileManuIsOpen() { @@ -34,4 +47,20 @@ export class ProfileUserMenu { async validateUserNameInProfileMenu(username: string){ await expect(this.profileUserName).toHaveText(username); } + + async clickCloseProfileMenu() { + this.headerPostList.click({force: true}); + } + + async setTheme(thememode: string) { + // Set the dark theme - first click profile avatar + // Click avatar of the user + await this.homePage.profileAvatarButton.click(); + // Validate User is logged in + await this.page.waitForSelector(this.profileMenuContent['_selector']); + // Click Theme button + await this.themeModeButton.dispatchEvent('pointerdown'); + // Click Dark theme + await this.themeModeItem.locator(`span:text(\"${thememode}\")`).click(); + } } diff --git a/apps/blog/playwright/tests/testnet_e2e/votingPOM.spec.ts b/apps/blog/playwright/tests/testnet_e2e/votingPOM.spec.ts index 3c73aaecb..03c06c528 100644 --- a/apps/blog/playwright/tests/testnet_e2e/votingPOM.spec.ts +++ b/apps/blog/playwright/tests/testnet_e2e/votingPOM.spec.ts @@ -7,6 +7,21 @@ import { ApiHelper } from '../support/apiHelper'; test.describe('Voting tests with fixture and POM', () =>{ const url: string = process.env.REACT_APP_API_ENDPOINT || ""; + // Upvotes and downvotes colors + const lightModeRedColor: string = 'rgb(218, 43, 43)'; + const lightModeWhiteColor: string = 'rgb(255, 255, 255)'; + const lightModeClearColor: string = 'rgba(0, 0, 0, 0)'; + const lightModeGreyColor: string = 'rgb(75, 85, 99)'; + const darkModeRedColor: string = 'rgb(226, 18, 53)'; + const darkModeWhiteColor: string = 'rgb(255, 255, 255)'; + const darkModeClearColor: string = 'rgba(0, 0, 0, 0)'; + const darkModeGreyColor: string = 'rgb(75, 85, 99)'; + // Upvotes and downvotes tooltip texts + const upvoteTooltipText: string = 'UpvoteUpvote'; + const undoUpvoteTooltipText: string = 'Undo your upvoteUndo your upvote'; + const downvoteTooltipText: string = 'DownvoteDownvote'; + const undoDownvoteTooltipText: string = 'Undo your downvoteUndo your downvote'; + let homePage: HomePage; test.beforeEach(async ({ denserAutoTest4Page }) => { @@ -19,39 +34,52 @@ test.describe('Voting tests with fixture and POM', () =>{ test('Upvote the first post of the tranding list', async ({denserAutoTest4Page}) =>{ const loginForm = new LoginForm(denserAutoTest4Page.page); const loginHelper = new LoginHelper(denserAutoTest4Page.page); + const profileMenu = new ProfileUserMenu(denserAutoTest4Page.page); - // Validate User is logged in as denserautotest4 - await loginHelper.validateLoggedInUser(users.denserautotest4.username); - // Click to close the profile menu - await denserAutoTest4Page.page.getByTestId('community-name').locator('..').locator('..').click({force: true}); - // Validate that Upvote button of the first color - const firstPostUpvoteButtonLocator = denserAutoTest4Page.page.getByTestId('post-list-item').first().getByTestId('upvote-button').locator('svg'); - const firstPostUpvoteButtonLocatorToClick = denserAutoTest4Page.page.getByTestId('post-list-item').first().getByTestId('upvote-button'); - if (await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color') == 'rgb(218, 43, 43)'){ + const firstPostUpvoteButtonLocator = homePage.getFirstPostUpvoteButtonIcon; + const firstPostUpvoteButtonLocatorToClick = homePage.getFirstPostUpvoteButton; + + if (await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color') == lightModeRedColor){ // Validate that Upvote button of the first color red - expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color')).toBe('rgb(218, 43, 43)'); - expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'background-color')).toBe('rgba(0, 0, 0, 0)'); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color')).toBe(lightModeRedColor); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'background-color')).toBe(lightModeClearColor); + // Validate the upvote tooltips + await firstPostUpvoteButtonLocator.hover(); + await homePage.page.waitForTimeout(1000); + expect(await homePage.getUpvoteButtonTooltip.textContent()).toBe(upvoteTooltipText); } else { // Wait until optimistic ui is finished and validate the color of the upvote button await firstPostUpvoteButtonLocator.waitFor({state: 'visible'}); - expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color')).toBe('rgb(255, 255, 255)'); - expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'background-color')).toBe('rgb(218, 43, 43)'); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color')).toBe(lightModeWhiteColor); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'background-color')).toBe(lightModeRedColor); + // Validate the upvote tooltips + await firstPostUpvoteButtonLocator.hover(); + await homePage.page.waitForTimeout(1000); + expect(await homePage.getUpvoteButtonTooltip.textContent()).toBe(undoUpvoteTooltipText); } // Click Upvote button of the first post on the trending list await firstPostUpvoteButtonLocatorToClick.click(); // If a password to unlock key is needed - await loginForm.page.waitForTimeout(20000); + await loginForm.page.waitForTimeout(3000); await loginForm.putEnterYourPasswordToUnlockKeyIfNeeded(users.denserautotest4.safeStoragePassword); await firstPostUpvoteButtonLocator.waitFor({state: 'visible'}); - if (await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color') == 'rgb(255, 255, 255)') { + if (await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color') == lightModeWhiteColor) { // Wait until optimistic ui is finished and validate the color of the upvote button - expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color')).toBe('rgb(255, 255, 255)'); - expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'background-color')).toBe('rgb(218, 43, 43)'); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color')).toBe(lightModeWhiteColor); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'background-color')).toBe(lightModeRedColor); + + await firstPostUpvoteButtonLocator.hover(); + await homePage.page.waitForTimeout(1000); + expect(await homePage.getUpvoteButtonTooltip.textContent()).toBe(undoUpvoteTooltipText); } else { // Validate that Upvote button of the first color red - expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color')).toBe('rgb(218, 43, 43)'); - expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'background-color')).toBe('rgba(0, 0, 0, 0)'); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color')).toBe(lightModeRedColor); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'background-color')).toBe(lightModeClearColor); + + await firstPostUpvoteButtonLocator.hover(); + await homePage.page.waitForTimeout(1000); + expect(await homePage.getUpvoteButtonTooltip.textContent()).toBe(upvoteTooltipText); } }); @@ -60,42 +88,39 @@ test.describe('Voting tests with fixture and POM', () =>{ const loginHelper = new LoginHelper(denserAutoTest4Page.page); const profileMenu = new ProfileUserMenu(denserAutoTest4Page.page); - // Validate User is logged in as denserautotest4 - await loginHelper.validateLoggedInUser(users.denserautotest4.username); - // Click to close the profile menu - await denserAutoTest4Page.page.getByTestId('community-name').locator('..').locator('..').click({force: true}); // Validate that Upvote button of the first color red - const firstPostUpvoteButtonLocator = denserAutoTest4Page.page.getByTestId('post-list-item').first().getByTestId('upvote-button').locator('svg'); - const firstPostUpvoteButtonLocatorToClick = denserAutoTest4Page.page.getByTestId('post-list-item').first().getByTestId('upvote-button'); + const firstPostUpvoteButtonLocator = homePage.getFirstPostUpvoteButtonIcon; + const firstPostUpvoteButtonLocatorToClick = homePage.getFirstPostUpvoteButton; - if (await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color') == 'rgb(255, 255, 255)') { + if (await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color') == lightModeWhiteColor) { // Wait until optimistic ui is finished and validate the color of the upvote button - expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color')).toBe('rgb(255, 255, 255)'); - expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'background-color')).toBe('rgb(218, 43, 43)'); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color')).toBe(lightModeWhiteColor); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'background-color')).toBe(lightModeRedColor); } else { // Validate that Upvote button of the first color red - expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color')).toBe('rgb(218, 43, 43)'); - expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'background-color')).toBe('rgba(0, 0, 0, 0)'); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color')).toBe(lightModeRedColor); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'background-color')).toBe(lightModeClearColor); } // Click Upvote button of the first post on the trending list await firstPostUpvoteButtonLocatorToClick.click({force: true}); // If a password to unlock key is needed - await loginForm.page.waitForTimeout(20000); + await loginForm.page.waitForTimeout(3000); await loginForm.putEnterYourPasswordToUnlockKeyIfNeeded(users.denserautotest4.safeStoragePassword); // Wait until optimistic ui is finished and validate the color of the upvote button await firstPostUpvoteButtonLocator.waitFor({state: 'visible'}); - // Move pointer from the upvote icon - await denserAutoTest4Page.page.getByTestId('community-name').locator('..').locator('..').click({force: true}); + // Move pointer from the upvote icon - click the main post list's header element + await profileMenu.clickCloseProfileMenu(); + // await denserAutoTest4Page.page.getByTestId('community-name').locator('..').locator('..').click({force: true}); - if (await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color') == 'rgb(218, 43, 43)'){ + if (await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color') == lightModeRedColor){ // Validate that Upvote button of the first color red - expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color')).toBe('rgb(218, 43, 43)'); - expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'background-color')).toBe('rgba(0, 0, 0, 0)'); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color')).toBe(lightModeRedColor); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'background-color')).toBe(lightModeClearColor); } else { // Wait until optimistic ui is finished and validate the color of the upvote button await firstPostUpvoteButtonLocator.waitFor({state: 'visible'}); - expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color')).toBe('rgb(255, 255, 255)'); - expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'background-color')).toBe('rgb(218, 43, 43)'); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color')).toBe(lightModeWhiteColor); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'background-color')).toBe(lightModeRedColor); } }); @@ -103,30 +128,27 @@ test.describe('Voting tests with fixture and POM', () =>{ const loginForm = new LoginForm(denserAutoTest4Page.page); const loginHelper = new LoginHelper(denserAutoTest4Page.page); const apiHelper = new ApiHelper(denserAutoTest4Page.page); + const profileMenu = new ProfileUserMenu(denserAutoTest4Page.page); - // Validate User is logged in as denserautotest4 - await loginHelper.validateLoggedInUser(users.denserautotest4.username); - // Click to close the profile menu - await denserAutoTest4Page.page.getByTestId('community-name').locator('..').locator('..').click({force: true}); // Set first post upvote button locators - const firstPostUpvoteButtonLocator = denserAutoTest4Page.page.getByTestId('post-list-item').first().getByTestId('upvote-button').locator('svg'); - const firstPostUpvoteButtonLocatorToClick = denserAutoTest4Page.page.getByTestId('post-list-item').first().getByTestId('upvote-button'); + const firstPostUpvoteButtonLocator = homePage.getFirstPostUpvoteButtonIcon; + const firstPostUpvoteButtonLocatorToClick = homePage.getFirstPostUpvoteButton; // wait for the broadcast transaction const broadcastTransaction = apiHelper.waitForRequestToIntercept(url, "POST", "network_broadcast_api.broadcast_transaction"); // Click Upvote button of the first post on the trending list await firstPostUpvoteButtonLocatorToClick.click(); // If a password to unlock key is needed - await loginForm.page.waitForTimeout(20000); + await loginForm.page.waitForTimeout(3000); await loginForm.putEnterYourPasswordToUnlockKeyIfNeeded(users.denserautotest4.safeStoragePassword); await firstPostUpvoteButtonLocator.waitFor({state: 'visible'}); // wait for promise to resolve intercepted request const broadcastTransactionReq = await broadcastTransaction; - await denserAutoTest4Page.page.waitForTimeout(20000); + await denserAutoTest4Page.page.waitForTimeout(10000); const broadcastTransactionReqJson = await broadcastTransactionReq.postDataJSON(); // console.log('operations >>>: ', await broadcastTransactionReqJson.params.trx.operations); // If now color of the upvote button is read - if (await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color') == 'rgb(218, 43, 43)') { + if (await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color') == lightModeRedColor) { // it means that request was for 'Undo your upvote' expect(await broadcastTransactionReqJson.params.trx.operations[0].type).toBe('vote_operation'); expect(await broadcastTransactionReqJson.params.trx.operations[0].value.voter).toBe('denserautotest4'); @@ -140,45 +162,143 @@ test.describe('Voting tests with fixture and POM', () =>{ expect(await broadcastTransactionReqJson.params.trx.operations[0].value.weight).toBe(10000); } }); + + test('Upvote the first post of the tranding list in the dark theme', async ({denserAutoTest4Page}) =>{ + const loginForm = new LoginForm(denserAutoTest4Page.page); + const loginHelper = new LoginHelper(denserAutoTest4Page.page); + const profileMenu = new ProfileUserMenu(denserAutoTest4Page.page); + + const firstPostUpvoteButtonLocator = homePage.getFirstPostUpvoteButtonIcon; + const firstPostUpvoteButtonLocatorToClick = homePage.getFirstPostUpvoteButton; + + // Set the dark theme + await profileMenu.setTheme('Dark'); + await profileMenu.page.waitForTimeout(500); + + if (await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color') == darkModeRedColor){ + // Validate that Upvote button of the first color red + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color')).toBe(darkModeRedColor); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'background-color')).toBe(darkModeClearColor); + } else { + // Wait until optimistic ui is finished and validate the color of the upvote button + await firstPostUpvoteButtonLocator.waitFor({state: 'visible'}); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color')).toBe(darkModeWhiteColor); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'background-color')).toBe(darkModeRedColor); + } + // Click Upvote button of the first post on the trending list + await firstPostUpvoteButtonLocatorToClick.click(); + // If a password to unlock key is needed + await loginForm.page.waitForTimeout(3000); + await loginForm.putEnterYourPasswordToUnlockKeyIfNeeded(users.denserautotest4.safeStoragePassword); + await firstPostUpvoteButtonLocator.waitFor({state: 'visible'}); + + if (await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color') == darkModeWhiteColor) { + // Wait until optimistic ui is finished and validate the color of the upvote button + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color')).toBe(darkModeWhiteColor); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'background-color')).toBe(darkModeRedColor); + } else { + // Validate that Upvote button of the first color red + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color')).toBe(darkModeRedColor); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'background-color')).toBe(darkModeClearColor); + } + }); + + test('Upvote the first post of the tranding list again in the dark theme', async ({denserAutoTest4Page}) =>{ + const loginForm = new LoginForm(denserAutoTest4Page.page); + const loginHelper = new LoginHelper(denserAutoTest4Page.page); + const profileMenu = new ProfileUserMenu(denserAutoTest4Page.page); + + // Validate that Upvote button of the first color red + const firstPostUpvoteButtonLocator = homePage.getFirstPostUpvoteButtonIcon; + const firstPostUpvoteButtonLocatorToClick = homePage.getFirstPostUpvoteButton; + + // Set the dark theme + await profileMenu.setTheme('Dark'); + await profileMenu.page.waitForTimeout(500); + + if (await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color') == darkModeWhiteColor) { + // Wait until optimistic ui is finished and validate the color of the upvote button + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color')).toBe(darkModeWhiteColor); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'background-color')).toBe(darkModeRedColor); + } else { + // Validate that Upvote button of the first color red + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color')).toBe(darkModeRedColor); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'background-color')).toBe(darkModeClearColor); + } + // Click Upvote button of the first post on the trending list + await firstPostUpvoteButtonLocatorToClick.click({force: true}); + // If a password to unlock key is needed + await loginForm.page.waitForTimeout(3000); + await loginForm.putEnterYourPasswordToUnlockKeyIfNeeded(users.denserautotest4.safeStoragePassword); + // Wait until optimistic ui is finished and validate the color of the upvote button + await firstPostUpvoteButtonLocator.waitFor({state: 'visible'}); + // Move pointer from the upvote icon - click the main post list's header element + await profileMenu.clickCloseProfileMenu(); + + if (await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color') == darkModeRedColor){ + // Validate that Upvote button of the first color red + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color')).toBe(darkModeRedColor); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'background-color')).toBe(darkModeClearColor); + } else { + // Wait until optimistic ui is finished and validate the color of the upvote button + await firstPostUpvoteButtonLocator.waitFor({state: 'visible'}); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'color')).toBe(darkModeWhiteColor); + expect(await homePage.getElementCssPropertyValue(firstPostUpvoteButtonLocator, 'background-color')).toBe(darkModeRedColor); + } + }); }); test.describe('Downvote group', () => { test('Downvote the second post of the tranding list', async ({denserAutoTest4Page}) =>{ const loginForm = new LoginForm(denserAutoTest4Page.page); const loginHelper = new LoginHelper(denserAutoTest4Page.page); + const profileMenu = new ProfileUserMenu(denserAutoTest4Page.page); - // Validate User is logged in as denserautotest4 - await loginHelper.validateLoggedInUser(users.denserautotest4.username); - // Click to close the profile menu - await denserAutoTest4Page.page.getByTestId('community-name').locator('..').locator('..').click({force: true}); // Validate that Downvote button of the first color - const secondPostDownvoteButtonLocator = denserAutoTest4Page.page.getByTestId('post-list-item').nth(1).getByTestId('downvote-button').locator('svg'); - const secondPostDownvoteButtonLocatorToClick = denserAutoTest4Page.page.getByTestId('post-list-item').nth(1).getByTestId('downvote-button'); - if (await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color') == 'rgb(75, 85, 99)'){ + const secondPostDownvoteButtonLocator = homePage.getSecondPostDownvoteButtonIcon; + const secondPostDownvoteButtonLocatorToClick = homePage.getSecondPostDownvoteButton; + + if (await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color') == lightModeGreyColor){ // Validate that Upvote button of the first color red - expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color')).toBe('rgb(75, 85, 99)'); - expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'background-color')).toBe('rgba(0, 0, 0, 0)'); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color')).toBe(lightModeGreyColor); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'background-color')).toBe(lightModeClearColor); + // Validate the downvote tooltip text + await secondPostDownvoteButtonLocator.hover(); + await homePage.page.waitForTimeout(1000); + expect(await homePage.getDownvoteButtonTooltip.textContent()).toBe(downvoteTooltipText); } else { // Wait until optimistic ui is finished and validate the color of the downvote button await secondPostDownvoteButtonLocator.waitFor({state: 'visible'}); - expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color')).toBe('rgb(255, 255, 255)'); - expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'background-color')).toBe('rgb(218, 43, 43)'); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color')).toBe(lightModeWhiteColor); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'background-color')).toBe(lightModeRedColor); + // Validate the undo downvote tooltip text + await secondPostDownvoteButtonLocator.hover(); + await homePage.page.waitForTimeout(1000); + expect(await homePage.getDownvoteButtonTooltip.textContent()).toBe(undoDownvoteTooltipText); } // Click Downvote button of the second post on the trending list await secondPostDownvoteButtonLocatorToClick.click(); // If a password to unlock key is needed - await loginForm.page.waitForTimeout(20000); + await loginForm.page.waitForTimeout(3000); await loginForm.putEnterYourPasswordToUnlockKeyIfNeeded(users.denserautotest4.safeStoragePassword); await secondPostDownvoteButtonLocator.waitFor({state: 'visible'}); await loginForm.page.waitForTimeout(2000); - if (await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color') == 'rgb(255, 255, 255)') { + if (await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color') == lightModeWhiteColor) { // Wait until optimistic ui is finished and validate the color of the upvote button - expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color')).toBe('rgb(255, 255, 255)'); - expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'background-color')).toBe('rgb(218, 43, 43)'); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color')).toBe(lightModeWhiteColor); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'background-color')).toBe(lightModeRedColor); + // Validate the undo downvote tooltip text + await secondPostDownvoteButtonLocator.hover(); + await homePage.page.waitForTimeout(1000); + expect(await homePage.getDownvoteButtonTooltip.textContent()).toBe(undoDownvoteTooltipText); } else { // Validate that Downvote button of the second post has color grey - expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color')).toBe('rgb(75, 85, 99)'); - expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'background-color')).toBe('rgba(0, 0, 0, 0)'); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color')).toBe(lightModeGreyColor); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'background-color')).toBe(lightModeClearColor); + // Validate the downvote tooltip text + await secondPostDownvoteButtonLocator.hover(); + await homePage.page.waitForTimeout(1000); + expect(await homePage.getDownvoteButtonTooltip.textContent()).toBe(downvoteTooltipText); } }); @@ -187,42 +307,38 @@ test.describe('Voting tests with fixture and POM', () =>{ const loginHelper = new LoginHelper(denserAutoTest4Page.page); const profileMenu = new ProfileUserMenu(denserAutoTest4Page.page); - // Validate User is logged in as denserautotest4 - await loginHelper.validateLoggedInUser(users.denserautotest4.username); - // Click to close the profile menu - await denserAutoTest4Page.page.getByTestId('community-name').locator('..').locator('..').click({force: true}); // Get the second downvote button locator - const secondPostDownvoteButtonLocator = denserAutoTest4Page.page.getByTestId('post-list-item').nth(1).getByTestId('downvote-button').locator('svg'); - const secondPostDownvoteButtonLocatorToClick = denserAutoTest4Page.page.getByTestId('post-list-item').nth(1).getByTestId('downvote-button'); + const secondPostDownvoteButtonLocator = homePage.getSecondPostDownvoteButtonIcon; + const secondPostDownvoteButtonLocatorToClick = homePage.getSecondPostDownvoteButton; - if (await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color') == 'rgb(255, 255, 255)') { + if (await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color') == lightModeWhiteColor) { // Wait until optimistic ui is finished and validate the color of the downvote button - expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color')).toBe('rgb(255, 255, 255)'); - expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'background-color')).toBe('rgb(218, 43, 43)'); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color')).toBe(lightModeWhiteColor); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'background-color')).toBe(lightModeRedColor); } else { // Validate that Downvote button of the second post is color grey - expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color')).toBe('rgb(75, 85, 99)'); - expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'background-color')).toBe('rgba(0, 0, 0, 0)'); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color')).toBe(lightModeGreyColor); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'background-color')).toBe(lightModeClearColor); } // Click Downvote button of the second post on the trending list await secondPostDownvoteButtonLocatorToClick.click({force: true}); // If a password to unlock key is needed - await loginForm.page.waitForTimeout(20000); + await loginForm.page.waitForTimeout(3000); await loginForm.putEnterYourPasswordToUnlockKeyIfNeeded(users.denserautotest4.safeStoragePassword); // Wait until optimistic ui is finished and validate the color of the downvote button await secondPostDownvoteButtonLocator.waitFor({state: 'visible'}); - // Move pointer from the upvote icon - await denserAutoTest4Page.page.getByTestId('community-name').locator('..').locator('..').click({force: true}); + // Move pointer from the upvote icon - click the main post list's header element + await profileMenu.clickCloseProfileMenu(); - if (await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color') == 'rgb(75, 85, 99)'){ + if (await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color') == lightModeGreyColor){ // Validate that Downvote button of the second post is color grey - expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color')).toBe('rgb(75, 85, 99)'); - expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'background-color')).toBe('rgba(0, 0, 0, 0)'); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color')).toBe(lightModeGreyColor); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'background-color')).toBe(lightModeClearColor); } else { // Wait until optimistic ui is finished and validate the color of the downvote button await secondPostDownvoteButtonLocator.waitFor({state: 'visible'}); - expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color')).toBe('rgb(255, 255, 255)'); - expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'background-color')).toBe('rgb(218, 43, 43)'); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color')).toBe(lightModeWhiteColor); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'background-color')).toBe(lightModeRedColor); } }); @@ -230,30 +346,27 @@ test.describe('Voting tests with fixture and POM', () =>{ const loginForm = new LoginForm(denserAutoTest4Page.page); const loginHelper = new LoginHelper(denserAutoTest4Page.page); const apiHelper = new ApiHelper(denserAutoTest4Page.page); + const profileMenu = new ProfileUserMenu(denserAutoTest4Page.page); - // Validate User is logged in as denserautotest4 - await loginHelper.validateLoggedInUser(users.denserautotest4.username); - // Click to close the profile menu - await denserAutoTest4Page.page.getByTestId('community-name').locator('..').locator('..').click({force: true}); // Set second post downvote button locators - const secondPostDownvoteButtonLocator = denserAutoTest4Page.page.getByTestId('post-list-item').nth(1).getByTestId('downvote-button').locator('svg'); - const secondPostDownvoteButtonLocatorToClick = denserAutoTest4Page.page.getByTestId('post-list-item').nth(1).getByTestId('downvote-button'); + const secondPostDownvoteButtonLocator = homePage.getSecondPostDownvoteButtonIcon; + const secondPostDownvoteButtonLocatorToClick = homePage.getSecondPostDownvoteButton; // wait for the broadcast transaction const broadcastTransaction = apiHelper.waitForRequestToIntercept(url, "POST", "network_broadcast_api.broadcast_transaction"); // Click Downvote button of the second post on the trending list await secondPostDownvoteButtonLocatorToClick.click(); // If a password to unlock key is needed - await loginForm.page.waitForTimeout(20000); + await loginForm.page.waitForTimeout(3000); await loginForm.putEnterYourPasswordToUnlockKeyIfNeeded(users.denserautotest4.safeStoragePassword); await secondPostDownvoteButtonLocator.waitFor({state: 'visible'}); await loginForm.page.waitForTimeout(2000); // wait for promise to resolve intercepted request const broadcastTransactionReq = await broadcastTransaction; - await denserAutoTest4Page.page.waitForTimeout(20000); + await denserAutoTest4Page.page.waitForTimeout(10000); const broadcastTransactionReqJson = await broadcastTransactionReq.postDataJSON(); // console.log('operations >>>: ', await broadcastTransactionReqJson.params.trx.operations); // If now color of the downvote button is grey - if (await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color') == 'rgb(75, 85, 99)') { + if (await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color') == lightModeGreyColor) { // it means that request was for 'Undo your downvote' expect(await broadcastTransactionReqJson.params.trx.operations[0].type).toBe('vote_operation'); expect(await broadcastTransactionReqJson.params.trx.operations[0].value.voter).toBe('denserautotest4'); @@ -267,5 +380,90 @@ test.describe('Voting tests with fixture and POM', () =>{ expect(await broadcastTransactionReqJson.params.trx.operations[0].value.weight).toBe(-10000); } }); + + test('Downvote the second post of the tranding list in the dark theme', async ({denserAutoTest4Page}) =>{ + const loginForm = new LoginForm(denserAutoTest4Page.page); + const loginHelper = new LoginHelper(denserAutoTest4Page.page); + const profileMenu = new ProfileUserMenu(denserAutoTest4Page.page); + + // Validate that Downvote button of the first color + const secondPostDownvoteButtonLocator = homePage.getSecondPostDownvoteButtonIcon; + const secondPostDownvoteButtonLocatorToClick = homePage.getSecondPostDownvoteButton; + + // Set the dark theme + await profileMenu.setTheme('Dark'); + await profileMenu.page.waitForTimeout(500); + + if (await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color') == darkModeGreyColor){ + // Validate that Upvote button of the first color red + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color')).toBe(darkModeGreyColor); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'background-color')).toBe(darkModeClearColor); + } else { + // Wait until optimistic ui is finished and validate the color of the downvote button + await secondPostDownvoteButtonLocator.waitFor({state: 'visible'}); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color')).toBe(darkModeWhiteColor); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'background-color')).toBe(darkModeRedColor); + } + // Click Downvote button of the second post on the trending list + await secondPostDownvoteButtonLocatorToClick.click(); + // If a password to unlock key is needed + await loginForm.page.waitForTimeout(3000); + await loginForm.putEnterYourPasswordToUnlockKeyIfNeeded(users.denserautotest4.safeStoragePassword); + await secondPostDownvoteButtonLocator.waitFor({state: 'visible'}); + await loginForm.page.waitForTimeout(2000); + if (await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color') == darkModeWhiteColor) { + // Wait until optimistic ui is finished and validate the color of the upvote button + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color')).toBe(darkModeWhiteColor); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'background-color')).toBe(darkModeRedColor); + } else { + // Validate that Downvote button of the second post has color grey + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color')).toBe(darkModeGreyColor); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'background-color')).toBe(darkModeClearColor); + } + }); + + test('Downvote the second post of the tranding list in the dark theme again', async ({denserAutoTest4Page}) =>{ + const loginForm = new LoginForm(denserAutoTest4Page.page); + const loginHelper = new LoginHelper(denserAutoTest4Page.page); + const profileMenu = new ProfileUserMenu(denserAutoTest4Page.page); + + // Get the second downvote button locator + const secondPostDownvoteButtonLocator = homePage.getSecondPostDownvoteButtonIcon; + const secondPostDownvoteButtonLocatorToClick = homePage.getSecondPostDownvoteButton; + + // Set the dark theme + await profileMenu.setTheme('Dark'); + await profileMenu.page.waitForTimeout(500); + + if (await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color') == darkModeWhiteColor) { + // Wait until optimistic ui is finished and validate the color of the downvote button + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color')).toBe(darkModeWhiteColor); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'background-color')).toBe(darkModeRedColor); + } else { + // Validate that Downvote button of the second post is color grey + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color')).toBe(darkModeGreyColor); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'background-color')).toBe(darkModeClearColor); + } + // Click Downvote button of the second post on the trending list + await secondPostDownvoteButtonLocatorToClick.click({force: true}); + // If a password to unlock key is needed + await loginForm.page.waitForTimeout(3000); + await loginForm.putEnterYourPasswordToUnlockKeyIfNeeded(users.denserautotest4.safeStoragePassword); + // Wait until optimistic ui is finished and validate the color of the downvote button + await secondPostDownvoteButtonLocator.waitFor({state: 'visible'}); + // Move pointer from the upvote icon - click the main post list's header element + await profileMenu.clickCloseProfileMenu(); + + if (await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color') == darkModeGreyColor){ + // Validate that Downvote button of the second post is color grey + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color')).toBe(darkModeGreyColor); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'background-color')).toBe(darkModeClearColor); + } else { + // Wait until optimistic ui is finished and validate the color of the downvote button + await secondPostDownvoteButtonLocator.waitFor({state: 'visible'}); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'color')).toBe(darkModeWhiteColor); + expect(await homePage.getElementCssPropertyValue(secondPostDownvoteButtonLocator, 'background-color')).toBe(darkModeRedColor); + } + }); }); }); -- GitLab From 92951d030f7bdbc74e2f831525a6e0a2138fff10 Mon Sep 17 00:00:00 2001 From: Piotr Berezka Date: Tue, 25 Feb 2025 10:06:15 +0100 Subject: [PATCH 2/2] fix time stamps --- apps/blog/locales/pl/common_blog.json | 10 +++++----- packages/ui/lib/parse-date.ts | 3 ++- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/apps/blog/locales/pl/common_blog.json b/apps/blog/locales/pl/common_blog.json index a2b65c6e1..2a6712905 100644 --- a/apps/blog/locales/pl/common_blog.json +++ b/apps/blog/locales/pl/common_blog.json @@ -6,16 +6,16 @@ "unavailable_for_legal_reasons": "Niedostępne z przyczyn prawnych", "time_ago": { "a_few_seconds": " Kilka sekund temu", - "seconds": " sekund_y temu", - "minutes": " minut_y temu", + "seconds": " sekund temu", + "minutes": " minut temu", "a_minute": " minute temu", - "hours": " godzin_y temu", + "hours": " godzin temu", "an_hour": " godzine temu", "days": " dni temu", "a_day": " dzień temu", - "months": " miesięce_y temu", + "months": " miesięce temu", "a_month": " miesiąc temu", - "years": " lat_a temu", + "years": " lat temu", "a_year": " rok temu" }, "months": { diff --git a/packages/ui/lib/parse-date.ts b/packages/ui/lib/parse-date.ts index 8711b8e30..aad5c6326 100644 --- a/packages/ui/lib/parse-date.ts +++ b/packages/ui/lib/parse-date.ts @@ -62,7 +62,8 @@ export const dateToFullRelative = (d: string, t: TFunction<'common_wallet', unde .replace('months ago', t('global.time_ago.months')) .replace('a month ago', t('global.time_ago.a_month')) .replace('years ago', t('global.time_ago.years')) - .replace('a year ago', t('global.time_ago.a_year')); + .replace('a year ago', t('global.time_ago.a_year')) + .replace('hours ago', t('global.time_ago.hours')); } const dd = dm .fromNow() -- GitLab