diff --git a/playwright.config.ts b/playwright.config.ts index b9030f2..3418359 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -1,107 +1,108 @@ -import type { PlaywrightTestConfig } from '@playwright/test'; -import { devices } from '@playwright/test'; - -/** - * Read environment variables from file. - * https://github.com/motdotla/dotenv - */ -// require('dotenv').config(); - -/** - * See https://playwright.dev/docs/test-configuration. - */ -const config: PlaywrightTestConfig = { - testDir: './tests', - /* Maximum time one test can run for. */ - timeout: 30 * 1000, - expect: { - /** - * Maximum time expect() should wait for the condition to be met. - * For example in `await expect(locator).toHaveText();` - */ - timeout: 5000 - }, - /* 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 on CI. */ - workers: process.env.CI ? 1 : undefined, - /* Reporter to use. See https://playwright.dev/docs/test-reporters */ - reporter: '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: 'https://playwright.deev/docs/intro', - - /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ - trace: 'on-first-retry', - }, - - /* Configure projects for major browsers */ - projects: [ - { - name: 'chromium', - use: { - ...devices['Desktop Chrome'], - }, - }, - - // { - // name: 'firefox', - // use: { - // ...devices['Desktop Firefox'], - // }, - // }, - - // { - // name: 'webkit', - // use: { - // ...devices['Desktop Safari'], - // }, - // }, - - /* 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, - // }, -}; - -export default config; +import type { PlaywrightTestConfig } from '@playwright/test'; +import { devices } from '@playwright/test'; + +/** + * Read environment variables from file. + * https://github.com/motdotla/dotenv + */ +// require('dotenv').config(); + +/** + * See https://playwright.dev/docs/test-configuration. + */ +const config: PlaywrightTestConfig = { + testDir: './tests', + /* Maximum time one test can run for. */ + timeout: 30 * 1000, + expect: { + /** + * Maximum time expect() should wait for the condition to be met. + * For example in `await expect(locator).toHaveText();` + */ + timeout: 5000 + }, + /* 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 on CI. */ + workers: process.env.CI ? 1 : undefined, + /* Reporter to use. See https://playwright.dev/docs/test-reporters */ + reporter: '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('/')`. */ + // ** TENIA UNA E ADICIONAL EL URL ** + baseURL: 'https://playwright.dev/docs/intro', + + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: 'on-first-retry', + }, + + /* Configure projects for major browsers */ + projects: [ + { + name: 'chromium', + use: { + ...devices['Desktop Chrome'], + }, + }, + + // { + // name: 'firefox', + // use: { + // ...devices['Desktop Firefox'], + // }, + // }, + + // { + // name: 'webkit', + // use: { + // ...devices['Desktop Safari'], + // }, + // }, + + /* 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, + // }, +}; + +export default config; diff --git a/search.spec.ts b/search.spec.ts new file mode 100644 index 0000000..b1daa23 --- /dev/null +++ b/search.spec.ts @@ -0,0 +1,60 @@ +import { test, expect } from '@playwright/test'; + +test.beforeEach(async ({ page }) => { + await page.goto('/'); +}); + +test('Realizar una busqueda que no tenga resultados', async ({ page }) => { + await page.getByRole('button', { name: "Search" }).click(); + + await page.getByPlaceholder('Search docs').click(); + + await page.getByPlaceholder('Search docs').fill('hascontent'); + + // ** NO TENIA LOS AWAIT POR LO TANTO NO IBA A VALIDAR QUE SUCEDIERA ** + + await expect(page.locator('.DocSearch-NoResults p')).toBeVisible(); + + // ** AL TEXTO LE FALTABA LOS " " POR LO TANTO AL CARECER DE ELLOS, NO HACIA MATCH CON EL RESULTADO + + await expect(page.locator('.DocSearch-NoResults p')).toHaveText('No results for "hascontent"'); + +}) + +test('Limpiar el input de busqueda', async ({ page }) => { + await page.getByRole('button', { name: 'Search' }).click(); + + const searchBox = page.getByPlaceholder('Search docs'); + + await searchBox.click(); + + await searchBox.fill('somerandomtext'); + + // ** EL PLACEHOLDER NO GUARDA LA BUSQUEDA COMO UN TEXT SINO COMO UN VALUE ** + + await expect(searchBox).toHaveValue('somerandomtext'); + + await page.getByRole('button', { name: 'Clear the query' }).click(); + + await expect(searchBox).toHaveAttribute('value', ''); +}); + +test('Realizar una busqueda que genere al menos tenga un resultado', async ({ page }) => { + await page.getByRole('button', { name: 'Search ' }).click(); + + const searchBox = page.getByPlaceholder('Search docs'); + + await searchBox.click(); + + await page.getByPlaceholder('Search docs').fill('havetext'); + + // ** NUEVAMENTE EL INPUT LO GUARDA COMO UN VALUE NO COMO UN TEXTO EN EL INNER Y FALTABA EL AWAIT PARA VALIDAR QUE SUCEDIERA** + + await expect(searchBox).toHaveValue('havetext'); + + // Verity there are sections in the results + await page.locator('.DocSearch-Dropdown-Container section').nth(1).waitFor(); + const numberOfResults = await page.locator('.DocSearch-Dropdown-Container section').count(); + await expect(numberOfResults).toBeGreaterThan(0); + +}); \ No newline at end of file