Handle responsive design in the search test.

playwright/e2e/atk_search/atk_search.spec.js

@@ -35,7 +35,7 @@ test.describe('Search tests.', () => {
     await page.goto(baseUrl);
 
     for (let item of searchData.simple) {
-      await page.getByLabel('Search Form').click();
+      await openSearchForm(page);
       const keyInput = page.getByRole("searchbox", { name: "Search" });
       await keyInput.fill(item.keyword);
       await keyInput.press("Enter");
@@ -95,7 +95,7 @@ test.describe('Search tests.', () => {
 
   test('(ATK-PW-1162) Search by a keyword: empty input @ATK-PW-1162 @search @content @empty', async ({ page }) => {
     await page.goto(baseUrl);
-    await page.getByLabel('Search Form').click();
+    await openSearchForm(page);
     const searchInput = page.getByRole("searchbox", { name: "Search" });
     await expect(searchInput).toHaveAttribute('placeholder', 'Search by keyword or phrase.');
   });
@@ -115,6 +115,18 @@ test.describe('Search tests.', () => {
     await expect(page.getByText("Enter some keywords.")).toBeVisible();
   });
 
+  async function openSearchForm(page) {
+    // Handle "responsive design". If "Search form" isn't visible,
+    // have to click main menu button first.
+
+    let searchForm = page.getByLabel('Search Form');
+    await searchForm.waitFor();
+    if (!(await searchForm.isVisible())) {
+      await page.getByLabel('Main Menu').click();
+    }
+    await searchForm.click();
+  }
+
   async function checkResult(page, item) {
     const resultLocatorList = await page.locator('.search-result__title').all();
     const resultList = [];