如何將包含文本的xpath元素轉換為css

我有以下的Xpath來定位一個有文本經理的元素。 我需要在我們的Cypress IO自動化中使用CSS。 我的測驗通過點擊添加按鈕在Gui中添加一個新的專案，然后輸入Manager并點擊保存按鈕。 我想做一個斷言，當它被保存時，文本Manager存在。斷言沒有作業，因為沒有找到正確的定位器。

Xpath定位器：

//span[contains(text(),'Manager')

我試著把下面的內容作為CSS使用

cy.get('span:contains("Operator")

定位器不作業，當我運行我的代碼時，我得到以下錯誤

o   

find.form-control3
o 14assertexpected [ <span.form-control>, 2 more... ] 要有文本Manager，但文本是ManagerUndefinedManager3
斷言錯誤（AssertionError
10000ms后重試超時：預計'[ <span.form-control>, 2 more... ]'要有文本'Manager'，但文本是'UndefinedManager'。

元素串列中默認的第一項叫做Undefined。 當一個新條目被添加時，它在串列中是Manager。 我的代碼片斷是：

static get AudienceTextfieldSavedValue（）。Cypress.Chainable<JQuery<HTMLElement> > {
       //return cy.get('span:contains("Manager")').should('have.text', 'Manager')。

        //return cy.get('(ul).find(li with given text).find(form-control).have "Manager") ')
        return cy.get('.cdk-drop-list').find('.form-control').should('have.text', 'Manager')。
    }

it('Add Audience', () => {
        Lists.navigateToLists;
        Audience.clickAdd;        
        Audience.AudienceTextfield.type("Manager");        
        Audience.getSaveButton.click().then(() => {                            
            cy.wait(['@savingAudienceRecord'])。
        });
        Audience.AudienceTextfieldSavedValue.should（'have.text', 'Manager'）。
  });

HTML片段是。

請問我應該使用什么正確的css定位器？ 謝謝 Riaz

uj5u.com熱心網友回復：

在我的理解中，在測驗程序中發生的最簡單的再現是

你添加了新的條目，DOM變成了

你想檢查最后一個條目，所以AudienceTextfieldSavedValue()應該只選擇串列中的最后一個跨度（假設保存動作不對串列進行排序）。

static get AudienceTextfieldSavedValue()。Cypress.Chainable<JQuery<HTMLElement> > {
  return cy.get(' .cdk-drop-list').find(' .form-control')
    .last() // 假設保存的欄位是最后一個。
    .should('have.text', 'Manager') 。
}

it('Add Audience', () =>  {
  Lists.navigateToLists。
  Audience.clickAdd。       
  Audience.AudienceTextfield.type（"Manager"）。       
  Audience.getSaveButton.click().then（（）=>； {                            
    cy.wait(['@savingAudienceRecord']）。)
  });
  Audience.AudienceTextfieldSavedValue。 should('have.text', 'Manager')。
});

.should('have.text', 'Manager')被執行了兩次，所以你也許可以從AudienceTextfieldSavedValue()中洗掉它，而只是回傳最后的條目。

這樣一來，你就可以用不同的文本條目進行測驗。

你可能還想檢查一下條目的數量從2個增加到3個，因為如果Audience.getSaveButton.click()未能進行保存，你的測驗仍然會通過。

static get AudienceTextfieldSavedValue()。Cypress.Chainable<JQuery<HTMLElement> > {
  return cy.get(' .cdk-drop-list').find(' .form-control')
    .last() // 假設保存的欄位是最后一個。
}

static get AudienceTextfieldCount() 。Cypress.Chainable<JQuery<HTMLElement> > {
  return cy.get(' .cdk-drop-list').find(' .form-control')
    .its('length')
}

it('Add Audience', () =>  {
  Lists.navigateToLists。

  Audience.AudienceTextfieldCount().should('eq'/span>, 2)

  Audience.clickAdd。       
  Audience.AudienceTextfield.type（"Manager"）。       
  Audience.getSaveButton.click().then（（）=>； {                            
    cy.wait(['@savingAudienceRecord']）。)
  });

  Audience.AudienceTextfieldCount().should('eq'/span>, 3)
  Audience.AudienceTextfieldSavedValue。 should('have.text', 'Manager')。
});

標籤：

上一篇：回圈瀏覽包含段落標簽的div標簽

下一篇：對第一個程序的回傳值提出條件