如何编写稳定的谷歌翻译Cypress测试用例？解决定位器频繁变更导致的测试失效问题

The main issue with your current code is that it uses brittle, auto-generated selectors (like deeply nested classes and jsname attributes) which Google frequently updates as part of UI changes. To make your tests reliable, we need to shift to targeting elements based on user-facing content, semantic attributes, and stable identifiers instead of internal implementation details.

Key Optimizations to Implement: #

• Use cy.contains() to target elements by their visible text (e.g., language names, dropdown labels)
• Target interactive elements by their semantic aria-label or role attributes
• Avoid over-specific nested selectors that break with minor DOM tweaks
• Add explicit assertions to ensure elements are ready before interacting
• Optional: Use cy.intercept() to wait for translation API calls to complete for more consistent results

Optimized Cypress Test Code: #

beforeEach(() => {
  // Visit the page and wait for critical UI elements to load
  cy.visit('https://translate.google.com/');
  cy.get('[role="textbox"]').first().should('be.visible'); // Ensure input area is ready
});

it('translates text from English to Russian and verifies UI functionality', function() {
  // 1. Set source language to English
  cy.get('[aria-label="Source language"]').click(); // Open source language dropdown
  cy.contains('div', 'English').click(); // Select English by visible text

  // 2. Set target language to Russian
  cy.get('[aria-label="Target language"]').click(); // Open target language dropdown
  cy.contains('div', 'Russian').click(); // Select Russian by visible text

  // 3. Input "Test" into the source textbox
  cy.get('[role="textbox"]').first().type('Test');

  // 4. Verify UI elements and translation result
  cy.get('[role="textbox"]').eq(1)
    .should('be.visible')
    .and('have.value', 'Тест'); // Confirm correct translation output
  
  // Verify key UI components are present
  cy.get('[aria-label="Clear source text"]').should('be.visible');
  cy.get('[aria-label="Listen to source text"]').should('be.visible');
});

Explanation of Changes: #

• Language Dropdowns: Instead of fragile class chains, we target dropdowns using their aria-label attributes (semantic and designed to stay consistent for accessibility). cy.contains() ensures we select the correct language by its user-visible name, which rarely changes.
• Text Inputs: We use role="textbox" to target input areas, then first() and eq(1) to distinguish between source and target fields. This is far more stable than class-based selectors that shift with UI updates.
• Loading Checks: The beforeEach block waits for the source textbox to be visible, ensuring the page is fully loaded before test steps run.
• Assertions: We validate both the translation result and critical UI elements to meet your "UI displays normal" requirement.

Additional Stability Tips: #

If you encounter flakiness due to API delays, add an intercept to wait for the translation request to complete:

cy.intercept('POST', 'https://translate.google.com/_/TranslateWebserverUi/data/batchexecute').as('translate');
cy.get('[role="textbox"]').first().type('Test');
cy.wait('@translate'); // Wait for translation API call to finish
cy.get('[role="textbox"]').eq(1).should('have.value', 'Тест');

内容的提问来源于stack exchange，提问作者atrsartsarts