feat: convert "navigation tests spec" to Playwright

[Sembauke]

Checklist:

• I have read and followed the contribution guidelines.
• I have read and followed the how to open a pull request guide.
• My pull request targets the main branch of freeCodeCamp.
• I have tested these changes either locally on my machine, or GitPod.

Closes #XXXXX

[huyenltnguyen]

As with anything Playwright-related, I'm not entirely sure why something works or doesn't work.

I tested the changes locally, and the "Should take you to the next superblock (with editor solution)" test was flaky. When the test failed, the UI mode showed me an empty editor, so the issue would either be:

• The editor not receiving focus; or
• The copy-pasting doesn't work

I compared the code with projects.spec.ts, and nothing stood out to me. However, when I looked that the UI of the project pages (RWD vs Legacy JS), I noticed the difference in the size of the editable area:

Personal Portfolio	Palindrome Checker

On the Palindrome Checker page, the editable area is much larger (5 lines) compared to that of Personal Portfolio (1 line). So my theory is, when we simulate the focus editor action with .click(), Playwright's pointer can miss the Personal Portfolio's editor as the click area is too small, and thus the editor doesn't receive focus. (This is really just a guess, the pointer in both screenshots are placed in the exact position, so I expect they behave the same way).

To fix the issue, I updated focusEditor() to call .focus() instead of .click(), which simplifies the function a bit as well (the purpose of the function is to move focus to the editor, and we don't really care if that's from .click(), .focus(), or .tab()).