Fix: Fixes part of text input output component test where component popover elements are block others

[596050]

Description:
This pull request refactors the selection and interaction of elements in the textInputOutput.spec.ts test file to improve code readability and ensure proper functionality.

Changes:

• Consolidated the selection of elements using page.locator for better readability and maintainability.
• Elements are now stored in variables (component1, element1, component2, element2) for easier reference.
• Ensured that component popups are not blocking the elements by adding component1.blur() and component2.blur() before interactions.
• Refactored the drag-and-drop action for better clarity. Used element1.dragTo(element2) to move the first element to the second element's location dynamically.
• Left page.mouse.up() to ensure the mouse button is released after the drag-and-drop action.
• Removed redundant hover actions and streamlined the interaction process.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
langflow	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 25, 2024 10:34am

[Cristhianzl]

hi @596050,
thank you for your cooperation.

LGTM.

[vercel]

Deployment failed with the following error:

Resource is limited - try again in 45 minutes (more than 100, code: "api-deployments-free-per-day").

[596050]

hi @596050, thank you for your cooperation.

LGTM.

Hi @Cristhianzl , sure, we could offset the elements too? Should I create another PR to suggest that or add to this? I'm thinking:

export const offsetElements = async ({
  sourceElement,
  targetElement,
  page,
}) => {
  // Get bounding boxes
  const box1 = await sourceElement.boundingBox();
  const box2 = await targetElement.boundingBox();

  await page.mouse.move((box2?.x || 0) + 5, (box2?.y || 0) + 5);
  await page.mouse.down();

  // Move to the right of the source element
  await page.mouse.move(
    (box2?.x || 0) + (box2?.width || 0) / 2 + (box1?.width || 0),
    box2?.y || 0,
  );
  await page.mouse.up();
};

which becomes:

  const component1 = await page.locator(
    '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]',
  );

  const element1 = await page.locator(
    '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]/div/div[2]/div[5]/button/div[1]',
  );

  const component2 = await page.locator(
    '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]',
  );

  const element2 = await page.locator(
    '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div[1]',
  );

  await offsetElements({
    sourceElement: component1,
    targetElement: component2,
    page,
  });

  // ensure elements popups are not blocking
  component1.blur();
  component2.blur();

  // Click and hold on the first element and move to the second element
  await element1?.dragTo(element2);

  // ensure the mouse button is up
  await page.mouse.up();

Which should do something like this, the problem seems to have been components blocking eachother?:

This seems to leave the env error in the tests:

[WebServer] /home/runner/.cache/pypoetry/virtualenvs/langflow-9OwJkPRQ-py3.12/lib/python3.12/site-packages/langchain/agents/json_chat/base.py:22: SyntaxWarning: invalid escape sequence '\ '
  """Create an agent that uses JSON to format its logic, build for Chat Models.

Running 10 tests using 2 workers, shard 4 of 4
[WebServer] /home/runner/.cache/pypoetry/virtualenvs/langflow-9OwJkPRQ-py3.12/lib/python3.12/site-packages/anyio/streams/memory.py:[17](https://github.com/langflow-ai/langflow/actions/runs/9647385563/job/26606022066?pr=2297#step:13:18)7: ResourceWarning: Unclosed <MemoryObjectReceiveStream>
  warnings.warn(
ResourceWarning: Enable tracemalloc to get the object allocation traceback
·×··×·F·····Removing the temp database
tempDbPath /home/runner/work/langflow/langflow/src/frontend/temp
Successfully removed the temp database


  1) [chromium] › end-to-end/textInputOutput.spec.ts:6:5 › TextInputOutputComponent ────────────────

    Error: expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

      128 |   if (!process.env.OPENAI_API_KEY) {
      129 |     //You must set the OPENAI_API_KEY on .env file to run this test
    > 130 |     expect(false).toBe(true);
          |                   ^
      131 |   }
      132 |
      133 |   await page

        at /home/runner/work/langflow/langflow/src/frontend/tests/end-to-end/textInputOutput.spec.ts:130:[19](https://github.com/langflow-ai/langflow/actions/runs/9647385563/job/26606022066?pr=2297#step:13:20)

[vercel]

Deployment failed with the following error:

Resource is limited - try again in 55 minutes (more than 100, code: "api-deployments-free-per-day").

[vercel]

Deployment failed with the following error:

Resource is limited - try again in 41 minutes (more than 100, code: "api-deployments-free-per-day").

[Cristhianzl]

@596050
It seems like the error is due to the OPENAI_API_KEY value not being found in the .env file in the GitHub environment.
I will check this and let you know.

[Cristhianzl]

@596050

Due to some GitHub CI issues with the tests, I had to make several refactors. As a result, I need to close this PR. You can continue contributing from this new PR: #2407.

Thank you very much for your help with this part.

I think you can close this PR, ok?